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

Størrelse: px
Starte visningen fra side:

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

Transkript

1 Digital designmanual / version 1.1 / Region Hovedstaden P2 Design Manual 11

2 Designkoncept Univers Responsivitet Grundelementer Logo og navnetræk Farver Typografi Billedestill Grundskabeloner Design Sideeksempler Gridsystem Indhold Tekstniveauer Spacing Header Search bar Piktogrammer Cookies Fokushistorier Billedformater INTRANET Designkoncept Univers Responsivitet Grundelementer Farver Grundskabeloner Sideeksempler Indhold Elementer Billedformater NOTIFIKATIONER Grundskabeloner Sideeksempler Indhold Billedformater Designkoncept Minisites Grafik og branding Kampagnesite Grid Sidetyper Responsivitet INDHOLDSFORTEGNELSE MINISITES, KAMPAGNESITES OG CO-BRANDING

3 UNIVERS / DESIGNKONCEPT MINISITES Univers Webdesignet for Region Hovedstaden har til formål at give målgruppen et brugervenligt, tilgængelig og enkelt stiliseret univers. Ved hjælp af et lyst venligt farvespektre, der i sit udtryk er minimalt, kan brugeren koncentrere sig om indholdet og navigere hurtigt rundt i et overskueligt univers. Designguiden har til formål at give professionelle et arbejdsredskab til udvikling og implementering af diverse tiltag. 3

4 RESPONSIVITET / DESIGNKONCEPT MINISITES Responsivitet Webdesignet er responsivt, så det tilpasser sig alle skærmstørrelser og devices. Dermed har websitets elementer ikke en fast størrelse, men tilpasses efter skærmopløsningen. 4

5 LOGO OG NAVNETRÆK / GRUNDELEMENTER MINISITES Logo og navnetræk Region Hovedstadens identitet er forankret i et logo og navnetræk. Det karakteriske H er ligeledes grundelementet for regionens ligeværdige underidentiteter. Region Hovedstaden er den overordnede administrative instans, som har 2 virksomhedsområder: Hospitaler (herunder Region Hovedstadens Psykiatri) Tværgående virksomheder Alle virksomheder og hospitaler har slægtskab gennem mærket, men er også kendetegnet ved egen identitetsfarve og eget navnetræk. De 4 logoer er organisatorisk på samme niveau, så de vil aldrig optræde sammen. Logoer Region Hovedstaden Hospitaler Psykiatri Virksomheder 5

6 FARVER / GRUNDELEMENTER Farver Region Hovedstaden / primær farve RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af en primær farve og en række sekundære farver. Den primære farve er identitetsfarven. De sekundære farver bruges til webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states. 0,37,85 # På websitets forside ligger der et identitetsbånd med en gradient, som tager udgangspunkt i den primære farve. Region Hovedstaden / sekundære farver RGB HEX RGB HEX 0,125,187 #007DBB 128,146,170 #8092AA 240,251,191 #F0FBBF 51,51,51 # ,255,255 #FFFFFF 100,108,111 #646C6f 101,101,101 # ,184,184 #B8B8B8 213,213,213 #D5D5D5 240,240,240 #F0F0F0 Region Hovedstaden / gradient RGB HEX RGB HEX 0,37,85 # ,85,125 #29557D 6

7 FARVER / GRUNDELEMENTER Farver Hospital / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af to primær farver og en række sekundære farver. Hvor den ene primære farve (hospitalernes identitetsfarve) bruges til farvede flader, bruges den anden til klikbare typografier. Den der bruges til klikbare typografier (#007DBB) er lidt mørkere end den anden. Dette skyldes, at den skal leve op til WCAG farvevalideringskrav. Hospital / sekundære farver 0,156,232 #009CE8 0,125,187 #007DBB RGB HEX RGB HEX De sekundære farver bruges til webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states. På websitets forside ligger der et identitetsbånd med en gradient, som tager udgangspunkt i den primære farve. 56,130,127 #38827F 129,204,241 #81CCF1 240,251,191 #F0FBBF 51,51,51 # ,108,111 #646C6f 101,101,101 # ,184,184 #B8B8B8 213,213,213 #D5D5D5 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Hospital / gradient RGB HEX RGB HEX 0,156,232 #009CE8 118,198,235 #76C6EB 7

8 FARVER / GRUNDELEMENTER Farver Psykiatri / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af to primær farver og en række sekundære farver. Hvor den ene primære farve (RHP s identitetsfarve) bruges til farvede flader, bruges den anden til klikbare typografier. Den der bruges til klikbare typografier (#4F8325) er lidt mørkere end den anden. Dette skyldes, at den skal leve op til WCAG farvevalideringskrav. Psykiatri / sekundære farver 102,191,15 #66BF0F 79,131,37 #4F8325 RGB HEX RGB HEX De sekundære farver bruges til webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states. På websitets forside ligger der et identitetsbånd med en gradient, som tager udgangspunkt i den primære farve. 220,32,43 #DC202B 178,223,135 #B2DF87 240,251,191 #F0FBBF 51,51,51 # ,108,111 #646C6f 101,101,101 # ,184,184 #B8B8B8 213,213,213 #D5D5D5 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Psykiatri / gradient RGB HEX RGB HEX 102,191,15 #66BF0F 155,206,125 #9BCE7D 8

9 FARVER / GRUNDELEMENTER Farver Virksomheder / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstaden består af to primære farver og en række sekundære farver. Hvor den ene primære farve (virksomhedernes identitetsfarve) bruges til farvede flader, bruges den anden til klikbare typografier. Den der bruges til klikbare typografier (#497D83) er lidt mørkere end den anden. Dette skyldes, at den skal leve op til WCAG farvevalideringskrav. Virksomheder / sekundære farver 128,190,179 #85CCC9 73,125,131 #497D83 RGB HEX RGB HEX De sekundære farver bruges til webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states. På websitets forside ligger der et identitetsbånd med en gradient, som tager udgangspunkt i den primære farve. 220,32,43 #DC202B 127,186,193 #7FBAC1 240,251,191 #F0FBBF 51,51,51 # ,108,111 #646C6f 101,101,101 # ,184,184 #B8B8B8 213,213,213 #D5D5D5 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Virksomheder / gradient RGB HEX RGB HEX 128,190,179 #85CCC9 171,213,218 #ABD5DA 9

10 TYPOGRAFI/ GRUNDELEMENTER Mari Specialtegnet skrift til brug i navnetrækket og på websitet. Den bruges både i rubrikker, brødtekst og i navigationen. Mari Light ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Mari Book ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Mari Regular ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Mari Bold ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Mari Heavy ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Mari Poster ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå

11 BILLEDSTIL / GRUNDELEMENTER Billedstil Billeder giver liv, og konsekvent billedstil giver genkendelighed. Overordnet skal fotos afspejle tre værdier: Imødekommenhed, troværdighed og tryghed. Det er de tre værdier, der indrammer vores billedunivers. Billederne skal altid tages i øjenhøjde, så iagtageren er en del af situationen og ikke bliver en afstandstagende tilskuer. Billederne skal ydermere kommunikere indholdet til brugeren. Emotionel, stemning, breather Closeups, focus er centreret De gode historier Imødekommenhed Det er vigtigt for vores patienter og de pårørende at føle, de bliver taget hånd om af venligt personale i en situation, hvor de ellers kan føle sig utrygge. Brug billeder, der viser omsorg, handlekraft og venligt personale. Sørg for at gøre situationerne personlige og undgå hvide kitler, der ikke er sat i sammenhæng med behandlingen af patienter. Faglighed, rent udtryk Closeups, focus, dept of field Travlhed Troværdighed Vi kan ikke narre patienterne og de pårørende til at tro, at virkeligheden er en anden, end den de oplever. Derfor skal vi i billederne være troværdige og turde vise vores hverdag, som den er - uden hverken at gøre den smukkere eller mere grim og rodet, end den er. Undgå romantiserende løfter om helbredelse. Closeups, focus er centreret Faglighed, rent Emotionel, stemning, breather Tryghed Vi skal signalere professionalisme og kyndighed både lægefaglig og sundhedsfagligt - alt sammen for at give følelse af tryghed. Closeups, focus er centreret Forskning, rent udtryk Hverdag 11

12 DESIGN / GRUNDSKABELONER Design Webdesignet for Region Hovedstaden har til formål at give målgruppen et brugervenligt, tilgængeligt og enkelt stiliseret univers. Ved hjælp af et lyst venligt farvespektre der i sit udtryk er minimalt kan brugeren koncentrere sig om indholdet og navigere hurtigt rundt i et overskueligt univers. 12

13 SIDEEKSEMPLER / GRUNDSKABELONER Sideeksempler A B A. Forside B. Supersektion 13

14 SIDEEKSEMPLER / GRUNDSKABELONER Sideeksempler A B A. Afdelingssektion B. Afdelingssupersektion 14

15 SIDEEKSEMPLER / GRUNDSKABELONER MINISITES Sideeksempler A B A. Kategoriside B. Indholdsside 15

16 SIDEEKSEMPLER / GRUNDSKABELONER MINISITES Sideeksempler A B A. Politisk kalender B. Politisk kalender Indholdsside 16

17 SIDEEKSEMPLER / GRUNDSKABELONER MINISITES Sideeksempler A B A. Selvbetjening kategoriside B. Selvbetjening startside 17

18 SIDEEKSEMPLER / GRUNDSKABELONER MINISITES Sideeksempler A A. Selvbetjening klageformular 18

19 GRIDSYSTEM / GRUNDSKABELONER Grid Der anvendes et 12-spaltet responsivt grid med en maksbredde på 1170 px. Kolonners bredde er varianble, så griddet passer til forskellige skærmsørrelser og devices. Breakpoints: 940 px 768 px 320 px 19

20 GRIDSYSTEM / GRUNDSKABELONER Grids A 1170 px 940 px B A px B. 940 px 70 px 30 px 60 px 20 px 20

21 GRIDSYSTEM / GRUNDSKABELONER Grids A 724 px 300 px B A. 724 px (Tablet) B. 300 px (Mobile) 42 px 20 px 60 px 20 px 21

22 GRIDSYSTEM / GRUNDSKABELONER Skabeloner A B A. Forside Region Hovedstaden B. Forside Hospital 22

23 GRIDSYSTEM / GRUNDSKABELONER Indholdsskabeloner Sektion Supersektion Afdelingssektion (mavebælte) Afdelingssupersektion Kategoriside Listevisning (Presse & nyt) Indholdside Politisk kalender indholdsside 23

24 TEKSTNIVEAUER/ INDHOLD Tekstniveauer Region Hovedstaden Tagline Topnavigation Servicenavigation 3 For Fagfolk Button Topbannertekst 5 Identitetsbånd 7 6 Button Topfokushistorier rubrik 8 9 Topfokushistorier tid/dato Indgange rubrik Arrow links Indgange se alt om -links 12 Afsnitsrubrikker 13 24

25 TEKSTNIVEAUER/ INDHOLD Tekstniveauer Region Hovedstaden Nyheder rubrik Nyheder manchet Arrangementer item 16 Footer indgange rubrik 17 Footer indgange links Footer indgange se alt om -links Footer adresse Footer navigation (button) 25

26 TEKSTNIVEAUER/ INDHOLD Tekstniveauer Region Hovedstaden Body rubrik h Body manchet Body billedtekst 24 Body rubrik h Body brødtekst Body citat 27 Body byline link 28 Body rubrik h2 29 Input felt Input felt 1 Body doc link 32 26

27 TEKSTNIVEAUER/ INDHOLD Tekstniveauer Region Hovedstaden Left navigation rubrik 33 Left navigation link 34 Bread crumb 35 Alfabetisk oversigt bogstav 36 Organitorisk oversigt rubrik Afdelingsoversigt liste rubrik Afdelingsoversigt emne Afdelingsoversigt liste manchet 27

28 TEKSTNIVEAUER/ INDHOLD Tekstformatering TYPE FONT SIZE LEADING SPACING STYLE COLOR HOVER ACTIVE 1. Tagline Mari Light 17 px 21 px 50 9a9a9a 2. Servicenavigation Mari Regular 13 px / 007dbb 8092aa 3. For fagfolk - button Mari Regular 13 px 20 px 50 uppercase ffffff ffffff 4. Topnavigation Mari Bold 17 px 20 px aa 8092aa 5. Topbannertekst Mari Light 54 px 61 px Button Mari Light 16 px 20 px ffffff 7. Identitetsbånd Mari Book 20 px 30 px 50 ffffff 8. Topfokushistorier rubrik Mari Bold 17 px 22 px aa 9. Topfokushistorier tid/dato Mari Heavy 12 px 20 uppercase Indgange rubrik Mari Bold 22 px aa 11. Arrow links Mari Regular 18 px 40 arrow aa 12. Indgange se alt om -links Mari Poster 13 px dbb 8092aa 13. Afsnitsrubrikker Mari Light 34 px Nyheder rubrik Mari Bold 22 px 25 px aa 15. Nyheder manchet Mari Regular 15 px 32 px Arrangementer item Mari Regular 18 px 32 px / 007dbb 8092aa 17. Footer indgange rubrik Mari Heavy 18 px 40 underline 4b4b4b 9e9e9e 18. Footer indgange links Mari Regular 15 px 40 4b4b4b 9e9e9e 19. Footer indgange se alt om -links Mari Bold 15 px 40 4b4b4b 9e9e9e 20. Footer navigation (buttons) Mari Bold 12 px ffffff 21. Footer adresse Mari Regular 12 px 80 ffffff 22. Body rubrik h1 Mari Light 50 px 53 px Body manchet Mari Book 22 px 29 px c6f 24. Body billedtekst Mari Bold 13 px 16 px c6f 25. Body rubrik h3 Mari Bold 25 px 28 px Body brødtekst Mari Book 16 px 23 px Body citat Mari Book 28 px 33 px Body byline link Mari Regular 14 px 21 px dbb 8092aa 29. Body rubrik h2 Mari Light 34 px 34 px 38 px Input felt 1 Mari Book 19 px Input felt 2 Mari Book 19 px 24 px Body doc link Mari Bold 16 px dbb 8092aa 33. Left navigation rubrik Mari Heavy 18 px 40 uppercase aa 34. Left navigation link Mari Regular 16 px 45 px aa Mari Heavy / Bread crumb (navigation) Mari Regular 14 px d4d4d 28

29 TEKSTNIVEAUER/ INDHOLD Tekstformatering TYPE FONT SIZE LEADING SPACING STYLE COLOR HOVER ACTIVE 36. Alfabetisk oversigt bogstav Mary Heavy 54 px Organitorisk oversigt rubrik Mary Heavy 36 px Afdelingsoversigt emne Mary Bold 25 px c6f 39. Afdelingsoversigt liste rubrik Mary Bold 20 px dbb 8092aa 40. Afdelingsoversigt liste manchet Mari Book 16 px

30 SPACING/ INDHOLD Forside Region Hovedstaden 25 px 25 px 25 px 90 px 30 px 406 px 40 px 40 px 74 px 20 px 20 px 74 px 70 px 30

31 SPACING/ INDHOLD Forside Region Hovedstaden 70 px 25 px 20 px 30 px 70 px 70 px 40 px 20 px 70 px 70 px 18 px 40 px 70 px 70 px 31

32 SPACING/ INDHOLD HJEMMESIDE INTRANET MINISITE INTRANET SOCIAL NOTIFIKATIONER INTEGRERING Forside Region Hovedstaden 40 px 20 px 20 px 40 px 40 px 70 px 40 px 30 px 30 px 40 px 80 px 32

33 SPACING/ INDHOLD Footer 70 px 20 px 16 px 60 px 66 px 35 px 20 px 20 px 44 px 33

34 SPACING/ INDHOLD Forside Hospitalerne 20 px 20 px 70 px 40 px 10 px 70 px 34

35 SPACING/ INDHOLD Indholdsside 30 px 98 px 62 px 34 px 30 px 34 px 40 px 10 px 20 px 60 px 30 px 60 px 40 px 35

36 SPACING/ INDHOLD Indholdsside 20 px 40 px 40 px 20 px 40 px 60 px 30 px 30 px 40 px 36

37 SPACING/ INDHOLD Supersektion 60 px 60 px 30 px 25 px 20 px 30 px 60 px 37

38 SPACING/ INDHOLD Supersektion 20 px 20 px 20 px 20 px 20 px 18 px 20 px 30 px 20 px 30 px 10 px 80 px 38

39 SPACING/ INDHOLD Afdelingssupersektion 30 px 60 px 90 px 40 px 36 px 36 px 50 px 70 px 30 px 30 px 30 px 60 px 39

40 HEADER/ INDHOLD Desktop Den primære navigation for Region Hovedstadens webunivers ligger i toppen af hver side. Topsystemet er delt i servicenavigation, globalnavigation og breadcrumb. Tablet/mobil På mindre devices samles menupunkter, som der ikke er plads til, i en dropdown. Drop Shadow: Blend Mode: Multiply, Opacity: 15%, Angle: 120, Distance: 2px, Spread: 0px, Size: 2px 40

41 SEARCHBAR/ INDHOLD Global søgning Ved klik på søgeikonet i topnavigationen foldes søgefeltet ud og alt indhold under søgefeltet skubbes 95 px ned Tekst i søgefeltet: Font: Mari Book Size: 16 px Spacing: 50 Color: Hover color: RGB:224,224,224 HEX:e0e0e0 Hover color: RGB:224,224,224 HEX:e0e0e0 41

42 PIKTOGRAMMER/ INDHOLD & FARVER Piktogrammer Piktogrammer til web findes i fire forskellige størrelser. Farver Piktogrammerne findes i 4 forskellige farver: til hospitaler, Psykiatri, Region Hovedstaden og virksomheder. Piktogrammerne tager afsæt i farvepaletten for Region Hovedstaden. De må kun benyttes til det navngivne formål, og den fulde pakke kan ses på regionens designmanual under piktogrammer. Eksempler på store 180x180px - 360x360px. 180x180 hvis piktogrammet er bærende på en side + til print fra web 360x360 hvis der er brug for et ekstra stort format Piktogrammerne findes i 4 forskellige farver: til hospitaler, Psykiatri, Region Hovedstaden og virksomheder. Eksempler på små 63x63px til top task-felterne i den store brandingboks på forsiderne + til brødtekstfelter, højrespalte og nedarvning. Piktogrammerne findes i 4 forskellige farver: til hospitaler, Psykiatri, Region Hovedstaden og virksomheder. Disse findes yderligere i hvid på gennemsigtig baggrund. Eksempler på mini 32x32px til forside-linklisterne på regionh.dk. Piktogrammerne findes i 4 forskellige farver: til hospitaler, Psykiatri, Region Hovedstaden og virksomheder. Disse findes yderligere i hvid på gennemsigtig 42

43 COOKIES / INDHOLD Cookies Cookies-båndet optræder i bunden af browservinduet, første gang man besøger siden. 43

44 FOKUSHISTORIER/ INDHOLD Versioneringer af fokushistorier A A. 2 fokushistorier af 6 kolonner. B. 1 fokushistorier af 8 kolonner og 2 fokushistorier af 4 kolonner. C. 4 fokushistorier af 6 kolonner. B C

45 BILLEDFORMATER/ INDHOLD Billedformater Forside topbanner 1920 x 520 px Forside topbanner og minisite topbanner 1920 x 520 px Forside tophistorier 270 x 160 px Afdelingssektion topbillede: 1920 x 477 px Forside tophistorier 270 x 160 px 45

46 BILLEDFORMATER/ INDHOLD Billedformater Forside fokushistorier 1/2 570 x 324 px Forside fokushistorier 1/2: 570 x 324 px 2/3: 700 x 466 px 1/3: 370 x 184 px Forside fokushistorier 2/3 700 x 466 px Forside fokushistorier 1/3 370 x 184 px 46

47 BILLEDFORMATER/ INDHOLD Billedformater Afdelingssektion topbillede 1920 x 477 Afdelingssektion topbillede 1920 x 477 px Supersektion indgange 370 x 185 px Supersektion indgange 370 x 185 px 47

48 BILLEDFORMATER/ INDHOLD Billedformater Kategoriside topbillede 870 x 300 px Kategoriside topbillede 870 x 300 px Kategoriside indgange 270 x 160 px Kategoriside indgange 270 x 160 px 48

49 BILLEDFORMATER/ INDHOLD Billedformater Indholdsside topbillede 870 x 300 px Billede i fokusboks højrekolonne 268 x 120 px Indholdsside topbillede 870 x 300 px Indholdsside brødtekstbillede 518 x 242 px Indholdsside brødtekstbillede - bred 668 x 312 px Billede i fokusboks højrekolonne 268 x 120 px Billede i fokusboks bund Indholdsside brødtekstbillede 518 x 242 px Indholdsside brødtekstbillede - bred 668 x 312 px 368 x 164 px Billede i fokusboks bund 368 x 164 px 49

50 BILLEDFORMATER/ INDHOLD Billedformater Presse & nyt fukushistorier 420 x 210 px Presse & nyt fokushistorier 420 x 210 px Politisk indholdsside brødtekstbillede 570 x 300 px Politisk indholdsside brødtekstbillede 570 x 300 px 50

51 HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING INTRANET 51

52 UNIVERS/ DESIGNKONCEPT MINISITES Univers Webdesignet for Region Hovedstadens intranet har til formål at give målgruppen et brugervenligt, tilgængeligt og enkelt stiliseret univers. Universet skal signalere en rar arbejdsplads og adskille sig fra det åbne website ved hjælp af en anden farvepalette samt toplogin, der giver adgang til personificeret indhold. Intranettet gør brug af det samme responsive gridprincip som hovedsitet. 52

53 UNIVERS/ DESIGNKONCEPT MINISITES Responsivitet Intranettet er responsivt, så det tilpasser sig alle skærmstørrelser og devices. Dermed har websitets elementer ikke en fast størrelse, men tilpasses efter skærmopløsningen. 53

54 FARVER / GRUNDELEMENTER MINISITES Farver Intranet / primære farver RGB HEX RGB HEX Farvepaletten for Region Hovedstadens intranet består af to primære farver og en række sekundære farver. 225,247,126 #E1F77E 119,146,0 # Hvor den ene primære farve bruges til farvede flader, bruges den anden til klikbare typografier. Den der bruges til klikbare typografier (#779200) er lidt mørkere end den anden. Dette skyldes at den skal leve op til WCAG farvevalideringskrav. Intranet / sekundære farver RGB HEX RGB HEX De sekundære farver bruges til webelementer som tekst, bagrund og linjer. De anvendes også til de forskellige hover-states. 240,251,191 #F0FBBF 220,32,43 #DC202B 67,67,67 # ,101,101 # ,108, C6F 130,130,130 # ,34,34 # ,184,184 #B8B8B8 51,51,51 # ,204,204 #CCCCCC 255,255,255 #FFFFFF 240,240,240 #F0F0F0 Intranet / gradient RGB HEX RGB HEX 226,247,128 #E2F ,251,191 #F0FBBF 54

55 SIDEEKSEMPLER/ GRUNDSKABELONER MINISITES Sideeksempler A B A. Forside B. Supersektion 55

56 SIDEEKSEMPLER/ GRUNDSKABELONER MINISITES Sideeksempler A B A. Afdelingssektion B. Afdelingssupersektion 56

57 SIDEEKSEMPLER/ GRUNDSKABELONER MINISITES Sideeksempler A B A. Indholdsside B. Indholdsside 57

58 ELEMENTER/ INDHOLD MINISITES Elementer Intranettet gør brug af samtlige bokse, elementer, ikoner og billedformater, der bliver brugt på hjemmeside. Dog er der nogle unikke elementer og bokse, der kun bruges på intranettet. A. Toolbar/login A B C B. Alarm knap C. Identitetsbånd D. Page tools antal kommentarer, følg person, del siden. E. Kommentarfelt findes på indholdssider D E 58

59 BILLEDFORMATER/ INDHOLD MINISITES Billedformater Forside fokushistorie stor 568 x 278 px Forside fokushistorie stor 568 x 278 px Forside fokushistorie lille 368 x 163 px Forside Mit netværk 120 x 120 px Forside fokushistorie lille 368 x 163 px Forside Mit netværk 120 x 120 px 59

60 BILLEDFORMATER/ INDHOLD MINISITES Billedformater Forside nyhedslister 180 x 108 px Forside nyhedslister 180 x 108 px Indholdsside kommentar 80 x 80 px Telefonbog profilbillede 100 x 100 px Indholdsside kommentar 80 x 80 px Telefonbog profilbillede 100 x 100 px 60

61 HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING NOTIFIKATIONER 61

62 NOTIFIKATIONER / GRUNDSKABELONER MINISITES Sideeksempel 62

63 BILLEDFORMATER/ INDHOLD MINISITES Billedformater Notifikationer stor 600 x 230 px Notifikation stor 600 x 230 px Notifikation lille 260 x 150 px Notifikationer lille 260 x 150 px 63

64 HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING Minisites, kampagnesites og CO-branding, 64

65 MINISITES, KAMPAGNESITES OG CO-BRANDING / DESIGNKONCEPT MINISITES Minisites Minisites er opbygget med tæt tilførsforhold til virksomheds- og hospitalssite. Hovedafsenderlogo er placeret øverst til venstre. Supplerende navnetræk typisk navn på tværgående enhed skrives med skriften Mari Light størrelse 30 px. Det supplerende navnetræk placeres i en afstand der svarer til 2 x bredden af ben i H et. Indholdselementer er opbygget af samme moduler som virksomheds- og hospitalshjemmesider. 65

66 MINISITES, KAMPAGNESITES OG CO-BRANDING / DESIGNKONCEPT MINISITES Grafik og branding Ud over brugen af navnetræk i tagline, kan minisites bruge det store topbanner fra forside-layoutet til branding. Minisites kan også indsætte en godkendt grafik i topbaren. Headergrafik skal placeres til højre for servicemenuen. 66

67 MINISITES, KAMPAGNESITES OG CO-BRANDING / DESIGNKONCEPT MINISITES Kampagnesites med eller uden cobranding Kampagnesites er opbygget som minisites, men her er hovedafsender ikke en af virksomhederne. Hovedafsender er det co-branding projekt eller den kampagne, man ønsker at fremhæve. Logoets makshøjde er 60 px, ligesom på virksomheds- og hospitalssite. Logoer for samarbejdspartnere og leverandører indsættes på forsiden, og kan evt. nedarves på underliggende sider. 67

68 MINISITES, KAMPAGNESITES OG CO-BRANDING / GRID MINISITES Grid Der anvendes det samme 12-spaltede responsive grid som på virksomheds- og hospitalssite. Maksbredde: 1170 px. Mellem servicenavigationen og topgrafikken er der 35 px luft. Topgrafikken i højre side måler 266 px X 110 px og klæber altid til browserens højre kant. Breakpoints: 940 px 768 px 320 px 68

69 MINISITES, KAMPAGNESITES OG CO-BRANDING / SIDETYPER MINISITES Sidetyper CO-branding-sites, minisites og kampagnesites er alle opbygget med tæt tilførsforhold til virksomheds- og hospitalssite. Kun headeren indeholder nye elementer. Andre indholdselementer er opbygget af samme moduler som på virksomheds- og hospitalssite. 69

70 MINISITES, KAMPAGNESITES OG CO-BRANDING / RESPONSIVITET MINISITES Grids til responsive design A 1170 px 940 px B Disse eksempler viser, at bredden på grafikken skalerer i forhold til vinduesstørrelse. Billedformat, topbanner: 1920 x 520 px Grids til responsive design Disse eksempler viser, at bredden på grafikken automatisk skalerer i forhold til vinduesstørrelse. Fx: A px (én vinduesstørrelse) B. 940 px (en anden vinduesstørrelse) 70

71 MINISITES, KAMPAGNESITES OG CO-BRANDING / RESPONSIVITET MINISITES Grids til responsive design A 724 px 300 px B Disse eksempler viser, at bredden på grafikken automatisk skalerer i forhold til vinduesstørrelse. Fx: A. 724 px (Tablet) B. 300 px (Mobile) 71

72 HJEMMESIDE INTRANET MINISITE SOCIAL INTEGRERING 72

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

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

Læs mere

Digital designmanual / tredjepartsløsninger/version 1.0 / Region Hovedstaden

Digital designmanual / tredjepartsløsninger/version 1.0 / Region Hovedstaden Digital designmanual / tredjepartsløsninger/version 1.0 / Region Hovedstaden INDHOLDSFORTEGNELSE / TREDJEPARTS INTEGRERING DIGITALE DESIGNELEMENTER Grundelementer Logo og navnetræk Farver Typografi Billedestill

Læs mere

Digital designmanual / tredjepartsløsninger/version 1.0 / Region Hovedstaden

Digital designmanual / tredjepartsløsninger/version 1.0 / Region Hovedstaden Digital designmanual / tredjepartsløsninger/version 1.0 / Region Hovedstaden INDHOLDSFORTEGNELSE / TREDJEPARTS INTEGRERING DIGITALE DESIGNELEMENTER Grundelementer Logo og navnetræk Farver Typografi Billedestill

Læs mere

Digital designmanual / Tredjepartsløsninger (version 3) P2 Design Manual

Digital designmanual / Tredjepartsløsninger (version 3) P2 Design Manual Digital designmanual / Tredjepartsløsninger (version 3) P2 Design Manual 1 INDHOLDSFORTEGNELSE / TREDEJEPARTS INTEGRERING TREDJEPARTSINTEGRERING Grundelementer Logo og navnetræk Farver Typografi Billedstill

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

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

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

Designguide til Region Hovedstadens Web- & online-tv

Designguide til Region Hovedstadens Web- & online-tv Region Hovedstaden Designguide til Region Hovedstadens Web- & online-tv Designguide til Region Hovedstadens Web- & online-tv INDHOLD Introduktion 1 Logoplacering 2 Filmens titel 3 Titler og afsenderlogo

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

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

Designmanual. Bjarne Brønno 2014 Version 1.0

Designmanual. Bjarne Brønno 2014 Version 1.0 Designmanual Bjarne Brønno 2014 Version 1.0 Indholdsfortegnelse Indledning Farver Typografi Billedstil Logo Branding Brandingmateriale 3 4 5 6 7 9 10 Indledning Dette er en designmanual til musiker Bjarne

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

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

Designmanual

Designmanual 11-3-2016 Designmanual Om Designmanualen På disse sider er Man-Freds beskrevet. Manualen her kan bruges til at finde standarden til designet af hele Man-Freds identitet på tværs af alle deres mediekanaler.

Læs mere

DESIGN MANUAL. Designmanualen beskriver grundelementerne i Who Brands profil, og den giver eksempler og retningslinjer for deres anvendelse.

DESIGN MANUAL. Designmanualen beskriver grundelementerne i Who Brands profil, og den giver eksempler og retningslinjer for deres anvendelse. DESIGN MANUAL Designmanualen beskriver grundelementerne i Who Brands profil, og den giver eksempler og retningslinjer for deres anvendelse. Designmanualen er et værktøj til brug for dem, der i det daglige

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

NY IDENTITET TIL SCHWARZ

NY IDENTITET TIL SCHWARZ GRAFISK DESIGN NY IDENTITET TIL SCHWARZ Redskaber: Photoshop Illustrator Kundeprofil: Schwarz er en eksklusiv forhandler af senge og tilbehør i topklavlitet. Med deres store sortiment af kvalitetsmærker

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

Jobnet.dk designmanual. Version

Jobnet.dk designmanual. Version Jobnet.dk designmanual Version 04.00 15.02.2013 Arbejdsmarkedsstyrelsen 2013 GENERELT Browser kompatibilitet Jobnet.dk udvikles med brug af CSS3, hvilket gør det væsentligt nemmere at vedligeholde alting.

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

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

Farvebrug. Kul Neutral Lokorød

Farvebrug. Kul Neutral Lokorød Design Manual Logo Logoelementer Vores logo er bygget op af fire elementer. I midten vores lokomotiv ikon, der som standard er sat til 100% opasity, samt to tekst elementer henholdsvis øverst og nederst.

Læs mere

Umbraco. Brugerdokumentation

Umbraco. Brugerdokumentation 2 Umbraco Brugerdokumentation Indholdsfortegnelse Generel dokumentation... 3 Hvordan logger jeg ind i CMS et?... 3 Sidertyper... 3 Content... 3 Forside... 3 Sektionsforside... 3 Artikel... 3 Servicemappe...

Læs mere

Hjemmesidens layout. Sitecore Foundry maj Version 1.2

Hjemmesidens layout. Sitecore Foundry maj Version 1.2 Sitecore Foundry 3.0 Hjemmesidens layout 31. maj 2012 - Version 1.2 Pentia A/S Store Kongensgade 66, Baghuset 1264 København K Telefon: 7023 3330 E-mail: info@foreningssite.dk Indholdsfortegnelse Indledning...

Læs mere

FODMAPforum. Designmanual

FODMAPforum. Designmanual Designmanual Velkommen På de følgende sider finder du s designprogram. Med det ved hånden er du i stand til at designe løsninger til s grafiske flader. Her kan du slå op og finde ingredienserne til at

Læs mere

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2 Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2 Indledning:... 2 Metode 1 en samling af sider, med kun en engelsk version:... 3 Metode 2 Eksisterende sider med både en dansk og en engelsk

Læs mere

Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN

Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN Indholdsfortegnelse Introduktion... 2 Definitioner... 2 Generelt... 3 Oprettelse af en skabelon... 4 Sidetypeskabeloner... 5 Globale displaymoduler...

Læs mere

Y s MEN International. Designguide. Region Danmark. Side 0

Y s MEN International. Designguide. Region Danmark. Side 0 Y s MEN International Designguide Side 0 Visuel identitet til Y s Men International Y s Men International s visuelle identitet udtrykker kammeratskab, ansvar, fællesskab, sjov og udfordringer. Forsidebilledet

Læs mere

Inspiration til brug for udarbejdelse af apotekers hjemmesider

Inspiration til brug for udarbejdelse af apotekers hjemmesider Inspiration til brug for udarbejdelse af apotekers hjemmesider 1 Inspiration til brug for udarbejdelse af apotekers hjemmesider DECEMBER 2005 Inspiration til brug for udarbejdelse af apotekers hjemmesider

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

Designguide til Region Hovedstadens Web-TV

Designguide til Region Hovedstadens Web-TV Region Hovedstaden Designguide til Region Hovedstadens Web-TV September 2014 Introduktion Designguiden til Web-TV tager udgangspunkt i Region Hovedstadens designprogram. For at sikre et ensartet og gennemført

Læs mere

Co Brewers. Designmanual Rev. 1

Co Brewers. Designmanual Rev. 1 Designmanual 2016 Rev. 1 Indhold Source Sans Pro 01 Logo 02 Farveunivers Plakat Visitkort Label Website 04 Billedstil 05 Layout 03 Typografi Logo Logoet er designet så det skaber associationer til øl,

Læs mere

TYPOGRAFI OG OMBRYDNING

TYPOGRAFI OG OMBRYDNING TYPOGRAFI OG OMBRYDNING Opgaven var her at udarbejde en brochure for virksomheden Fynbo Glas A/S. Det er en engros virksomhed, der sælger glas til byggebranchen. Brochuren skulle bruges som en informationsbrochure,

Læs mere

Velkommen til TADAA! s visuelle verden

Velkommen til TADAA! s visuelle verden Velkommen til TADAA! s visuelle verden Part of the Insero Group 1 Velkommen til TADAA! s visuelle verden TADAA! s visuelle identitet er designet til at illustrere de værdier, som delebilskonceptet bygger

Læs mere

AM Interactive (AMI) designguide

AM Interactive (AMI) designguide AM Interactive (AMI) designguide AM Interactive designguide, Arild Garde Opdateret 3. september 2008 Identitet AMIs identitet sikres ved gennemført brug af logo, payoff, farver og typografi. Payoff time

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

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

Grafisk design. Ide. Designprocess. Målgruppe

Grafisk design. Ide. Designprocess. Målgruppe Ide Designprocess I denne opgave har jeg udviklet et website for et feriehus. Kunden ønsker et site, som både fungere privat, men også som offentlig hjemmeside. Hele site skal være på dansk, tysk og engelsk.

Læs mere

Designmanual. Romalt Idrætsforening 1981

Designmanual. Romalt Idrætsforening 1981 Designmanual Romalt Idrætsforening 1981 Introduktion Kære brugere af denne designmanual Denne designmanual omhandler pri mært brug af logo og farver i Romalt IF s designlinje. Den er ment og tænkt som

Læs mere

Trafikstyrelsens grafiske linje designmanual

Trafikstyrelsens grafiske linje designmanual Trafikstyrelsens designmanual Juli 2010 2 Trafikstyrelsens Designmanualen beskriver grundelementerne i Trafikstyrelsens profil og, og giver eksempler og retningslinjer for deres anvendelse. Designmanualen

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

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

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

Min Landsby Klynge WebSite

Min Landsby Klynge WebSite 1 Min Landsby Klynge WebSite Til Randers Kommune og Landsbyklyngen Kronjylland. Bilag til tilbud udarbejdet d. 11. juli 2016 af Min Landsby I/S Grundskabelonen. Nedenstående omfatter den grundlæggende

Læs mere

KONCEPT NAVIGATION STRUKTUR KEA

KONCEPT NAVIGATION STRUKTUR KEA KONCEPT NAVIGATION STRUKTUR FOR NYT.DK KONCEPT NAVIGATION STRUKTUR DEN VIDERE PROCES AGENDA DEN PRESSERENDE GRUND FOR ET NYT WEBSITE ER, AT DER ER BRUG FOR FØLGENDE MÅLET MED DET HELE MEN ER IKKE SAT I

Læs mere

Grafisk Design 70% Skitser

Grafisk Design 70% Skitser Grafisk design Grafisk 2 PRODUKT Som et led i den online markedsføring af BBQ Wing it, har jeg valgt at lave et website, med fokus på information. Det er et website, der er baseret ud fra lærte funktioner

Læs mere

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger GRAFISK PRODUKTION OG WORKFLOW Hjemmeside til Team Brügger DITTE MADSEN - SVENDEPRØVE - 2015 KUNDEPROFIL Team Brügger er en frisørsalon i Aars. Indehaveren Gitte Brügger startede salonen op sammen med

Læs mere

MÅLGRUPPE Alle typer af boligselskaber, ejer- og andelsforeninger samt div. institutioner (store som små) på Sjælland. Ikke private kunder.

MÅLGRUPPE Alle typer af boligselskaber, ejer- og andelsforeninger samt div. institutioner (store som små) på Sjælland. Ikke private kunder. GRAFISK DESIGN KUNDEN PA Vaskeriteknik er en enkeltmandsvirksomhed som startede i 2008. Manden bag er Preben, som gennem 14 års brancheerfaring startede sit eget firma op da han føler at han med sit partnerskab

Læs mere

Udarbejdet i uge 23-24, 2014 Michelle Ploug Hansen 02 Grafisk Design

Udarbejdet i uge 23-24, 2014 Michelle Ploug Hansen 02 Grafisk Design Udarbejdet i uge 23-24, 2014 Michelle Ploug Hansen 02 Grafisk Design Det gode logo kommunikerer værdier og taler til målgruppen. Derfor starter man altid med at lære kunden at kende, det kan enten gøres

Læs mere

Visuel guide til vores design. Version 2.0-2012-12-04

Visuel guide til vores design. Version 2.0-2012-12-04 Visuel guide til vores design Version 2.0-2012-12-04 Introduktion Et design En organisation FTF s designguide har til formål at sikre, at vi altid er kreative inden for de samme rammer og fremstår som

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

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

MARIA SKAU MADSEN SVENDEPRØVE 2015 WWW.BY-M.DK

MARIA SKAU MADSEN SVENDEPRØVE 2015 WWW.BY-M.DK DOKUMENTATION MARIA SKAU MADSEN WWW.BY-M.DK INDHOLDSFORTEGNELSE OPGAVE BESKRIVELSE.... 5 RESEARCH.... 5 DESIGN.... 5 SPECIFIKATIONER DET TRYKTE MEDIE.... 5 NUVÆRENDE IDENTITET... 6 PRIMÆR OG SEKUNDÆR MÅLGRUPPE....................6

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

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

Herning Centerby Guide til Umbraco

Herning Centerby Guide til Umbraco Herning Centerby Guide til Umbraco marts 2016 I GANG MED UMBRACO 4 LOGIN 4 LÆR UMBRACO AT KENDE 5 SÅDAN REDIGERER DU SIDER 6 VÆRKTØJSLINJEN 6 RET I TEKSTEN 7 RET ELLER INDSÆT LINK I TEKSTEN 8 RET ELLER

Læs mere

Mediegrafiker Dan Klessen 2011. Grafik og billedbehandling

Mediegrafiker Dan Klessen 2011. Grafik og billedbehandling Grafik og billedbehandling Grafik og billedbehandling I denne opgave inden for billedredigering, viser jeg før og efter billede, hvilke værktøjer jeg har brugt og hvad billedet skal bruges til. Billedet

Læs mere

Designmanual Det Nationale Institut for Kommuners og Regioners Analyse og Forskning

Designmanual Det Nationale Institut for Kommuners og Regioners Analyse og Forskning Opdateret 20. 09. 2012 Designmanual Det Nationale Institut for Kommuners og Regioners Analyse og Forskning Velkommen På de følgende sider finder du KORAs designprogram. Med det ved hånden er du i stand

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

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

DESIGNGUIDE // MAJ 2012

DESIGNGUIDE // MAJ 2012 DESIGNGUIDE // MAJ 2012 Designguiden indeholder corporate standarder og retningslinjer, der fastsætter cphbusiness grafiske identitet. De grafikfiler, som hører til cphbusiness corporate standarder må

Læs mere

foto // billeder fra hjemmesiden Websiden // feriebolig-i-toscana.dk

foto // billeder fra hjemmesiden Websiden // feriebolig-i-toscana.dk GRAFISK DESIGn Webdesign Min chef ville gerne have lavet en webside til firmaets udlejningshus i Italien. Huset på 200 m² er et traditionelt toskansk landhus i tre etager og ligger i gåafstand fra middelalderlandsbyen

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

Grafisk Design. fra idé til visuelt udtryk Benett

Grafisk Design. fra idé til visuelt udtryk Benett fra idé til visuelt udtryk Benett Indholdsfortegnelse Brief...5 Idé og skitsering....6 Værktøjer....6 Farvevalg....7 Flowchart eksisterende site...7 Design i Photoshop....9 Ikoner i Illustrator...11 Setup

Læs mere

Stella H. Christensen MG H3 / Svendeprøve 2013 Aarhus Tech. Typografi & Ombrydning

Stella H. Christensen MG H3 / Svendeprøve 2013 Aarhus Tech. Typografi & Ombrydning Typografi & Ombrydning OPGAVE Efter jul til ultimo januar køres en mellemdagskampagne i Hi-Fi Klubben. I den forbindelse skal der laves et indstik (mini-magasin) til de hollandske butikker, der viser gode

Læs mere

GRAFISK DESIGN. Responsiv website - Mockup

GRAFISK DESIGN. Responsiv website - Mockup GRAFISK DESIGN I denne fiktive opgave skulle vi skabe et online portfolio til fotografen Sofia. Kravet var en forside, samt en galleri side, og websitet skulle kunne bruges på bade mobil og desktop. Billederne

Læs mere

AF PETER SCHLÜTER. Workflow

AF PETER SCHLÜTER. Workflow AF PETER SCHLÜTER Workflow Projektløser: Projektvært: Opgave: Peter Schlüter Sømandskirken NY Logo, Kirkeblad & Designmanual Programmer: Photoshop Illustrator Indesign Sømandskirken i New York har udskrevet

Læs mere

MOT V ZE DESIGNMANUAL 2014

MOT V ZE DESIGNMANUAL 2014 DESIGNMANUAL 2014 Udgivet 28. maj 2014 FORORD Formålet med denne design manual er at fastlægge hvorledes Motivize fremstilles både grafisk and udtryksmæssigt. Med udgangspunkt i værdier som; motivation,

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

Typografi & ombrydning 3. Hovedforløb

Typografi & ombrydning 3. Hovedforløb Typografi & ombrydning 3. Hovedforløb Sabine Puk Sørensen Typografi & ombrydning 3. Hovedforløb InDesign Opgavebeskrivelse Opsætning og ombrydning af bogen Pædagogisk psykologi, som primært henvender sig

Læs mere

Y s MEN INTERNATIONAL. Region Danmark. Y s MEN International. Region Danmark. Designguide. Side 0

Y s MEN INTERNATIONAL. Region Danmark. Y s MEN International. Region Danmark. Designguide. Side 0 Y s MEN International Designguide Side 0 Visuel identitet til Y s Men International Y s Men International s visuelle identitet udtrykker kammeratskab, ansvar, fællesskab, sjov og udfordringer. Forsidebilledet

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

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

NAVN PÅ KAPITEL IDENTITET RAW 2015

NAVN PÅ KAPITEL IDENTITET RAW 2015 NAVN PÅ KAPITEL IDENTITET RAW 2015 Indholdsfortegnelse 1. Designkoncept 2. Logotype 3. Typografi 4. Det femte element 5. Farveskala 6. Fotostil 7. Eksempler på anvendelse 8. ipad magasin Side x Side x

Læs mere

DANMARKS DOMSTOLE DESIGNGUIDE

DANMARKS DOMSTOLE DESIGNGUIDE DANMARKS DOMSTOLE DESIGNGUIDE Marts 2017 /2 INDHOLD FORORD 3 LOGO/ET STÆRKT SYMBOL 4 LOGO/ANVENDELSE 5 LOGO/SUPPLERENDE LOGOER 6 REGLER FOR BRUG AF KERNEBUDSKAB 7 FARVER 8 FARVE-SÆT 9 GRAFISK ELEMENT/BÅNDET

Læs mere

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN. JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN. Grafisk design Grafisk design Opgaven Jeg har fået til opgave at re-designe Sells.dk. Sitet skal benytte elementer fra en kampagne, der tidligere er

Læs mere

COPENHAGEN. Opgaven. Kunden. Målgruppe. Layout 1. GRAFISK DESIGN // METTE-MARIE RANDSKOV

COPENHAGEN. Opgaven. Kunden. Målgruppe. Layout 1. GRAFISK DESIGN // METTE-MARIE RANDSKOV COPENHAGEN Opgaven Kunden The Organic Bakery er en voksende bagerkæde i Storkøbenhavn med hovedsæde på Østerbro. Bageriet beskæftiger sig med økologisk bagværk, herunder brød og kager. Det, de er mest

Læs mere

Udarbejdet af Birte marie Linnebjerg den 31. juli 2016.

Udarbejdet af Birte marie Linnebjerg den 31. juli 2016. Oprette ma nedsbrev og sende det ud Udarbejdet af Birte marie Linnebjerg den 31. juli 2016. 1 I vores nye portal er det meget simpelt at oprette et månedsbrev, der udsendes via Mandrill, som sikrer, at

Læs mere

Grafisk design. Webdesign til barbershop

Grafisk design. Webdesign til barbershop Grafisk design Webdesign til barbershop Portfolio h1 Side 3 webdesign til barbershop Opgaven Barbershop i Horsens kom til os, for at få lavet et nye website. Afsender Barbershop er en barber salon i Horsens

Læs mere

Design manual for. Lavet af Gruppe 3: Daniel Gade. Maj-britt Gierahn. Pia Skriver. Vejleder i projektet Space Networking anno 2013 er:

Design manual for. Lavet af Gruppe 3: Daniel Gade. Maj-britt Gierahn. Pia Skriver. Vejleder i projektet Space Networking anno 2013 er: Design manual for Lavet af Gruppe 3: Daniel Gade. Maj-britt Gierahn. Pia Skriver. Vejleder i projektet Space Networking anno 2013 er: Erhverv: Kirsten Kasch Kommunikation: Karen Malene Andreasen og Jens

Læs mere

Grundforløbsprøve Projektbeskrivelse

Grundforløbsprøve Projektbeskrivelse Grundforløbsprøve Projektbeskrivelse Webintegrator Thomas á Rógvi 221191-2505 Indholdsfortegnelse Opgaven... 3 Tidsplan... 4 Målgruppe... 5 Layout... 6 Design... 7 Fonte... 7 Browser... 7 Bilag... 8 Det

Læs mere

TYPOGRAFI & OMBRYDNING - MAGASIN

TYPOGRAFI & OMBRYDNING - MAGASIN TYPOGRAFI & OMBRYDNING - MAGASIN REDEGØRELSE Opgavebeskrivelse Lav et fiktivt blad for Skanderborg Kommunes biblioteker, som fortæller hvad der skal ske januar-marts 2016, både med en samlet oversigt og

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

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

Grafisk design OPGAVEBESKRIVELSE

Grafisk design OPGAVEBESKRIVELSE OPGAVEBESKRIVELSE Min opgave var at lave og designe en pakke til s marketing og kommunikationsafdeling MarKom. Pakken består af: et hoved element portfolio hjemmeside communication.madebydelta.com to supplerende

Læs mere

Indholdsfortegnelse. Forord 2. Logo 3. Respektafstand 5. Farver 6. Typografi 7. Eksempler 9

Indholdsfortegnelse. Forord 2. Logo 3. Respektafstand 5. Farver 6. Typografi 7. Eksempler 9 Designmanual Indholdsfortegnelse Forord 2 Logo 3 Respektafstand 5 Farver 6 Typografi 7 Eksempler 9 1 Forord Denne designguide beskriver Kostume-Pusheren s visuelle identitet. Dette forslag er lavet til

Læs mere

Sabine Puk Sørensen Svendeprøve portfolio

Sabine Puk Sørensen Svendeprøve portfolio Sabine Puk Sørensen Svendeprøve portfolio 2016 Typografi & ombrydning Svendeprøve Kvalitetsvurdering Den færdige bog er overskuelig og læsevenlig, på trods af at den skulle sættes op på så få sider som

Læs mere

MANUAL TIL FS PÅ NETTET

MANUAL TIL FS PÅ NETTET MANUAL TIL FS PÅ NETTET Sådan opretter du nyheder og artikler (side 4) Sådan laver du links (side 14) Om tjek ind/ud og publicer (side 20) Sådan uploader du billeder og dokumenter (side 25) Sådan redigerer

Læs mere

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT PROJEKTET Udarbejdelse og idéudvikling af en fiktiv grafisk identitet til Puls Fitness. I denne kernefaglighed fremhæver jeg designet til websitet samt lidt merchandise. Derudover ses et udkast til bl.a.

Læs mere

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING DANSKE BEDEMÆND august 2014 v1.4 1 P a g e INDHOLDSFORTEGNELSE Adgang... 3 Overordnet om Umbraco... 4 Højreklik muligheder i oversigten...

Læs mere

Grafisk Design. Dansk Center For Organdonation

Grafisk Design. Dansk Center For Organdonation Grafisk Design Dansk Center For Redegørelsen Hvad går opgaven ud på? Denne opgave går ud på at få lavet et redesign af det logo, Dansk Center For fik fremstillet i 2008, af vores kommunikations afdeling.

Læs mere

Designmanual. Danmarks Naturfredningsforenings grafiske design

Designmanual. Danmarks Naturfredningsforenings grafiske design Designmanual Danmarks Naturfredningsforenings grafiske design 1 Formål Indhold Formål 3 Logoet og konsultativ tekst 4 Rubrik på forside 6 Typografi 7 Farver 8 Godkendelse og produktion 10 Formålet med

Læs mere

M.OE. Designmanual December 2014 1. udgave

M.OE. Designmanual December 2014 1. udgave M.OE Designmanual December 2014 1. udgave INDHOLDFORTEGNELSE ANVENDELSE 3 Rammer for anvendelse 4 GRUNDELEMENTER 5 Logo 6 Varianter 7 Skalering 8 Respektafstand 9 Farver 10 Typografi 11 Ikoner 12 BREVLINJE

Læs mere

VÆLG KLASSIFIKATION S. 3 UDFYLD BASIS INFORMATION S. 4. Om sektionen S. 4 Upload profilbillede S. 5 Tilføj til favoritter S. 5 Facebook reklamer S.

VÆLG KLASSIFIKATION S. 3 UDFYLD BASIS INFORMATION S. 4. Om sektionen S. 4 Upload profilbillede S. 5 Tilføj til favoritter S. 5 Facebook reklamer S. FACEBOOOK SIDER 1 2 INDHOLDSFORTEGNELSE VÆLG KLASSIFIKATION S. 3 UDFYLD BASIS INFORMATION S. 4 Om sektionen S. 4 Upload profilbillede S. 5 Tilføj til favoritter S. 5 Facebook reklamer S. 6 FORSTÅ ADMINISTRATIONSDELEN

Læs mere

Tidsplan...3 Afgrænsning 1.1...4 Research...5 Idégenerering...6. Logo 1.1...8 Logo 1.2...9. Logo 1.4... 12. Farver... 11

Tidsplan...3 Afgrænsning 1.1...4 Research...5 Idégenerering...6. Logo 1.1...8 Logo 1.2...9. Logo 1.4... 12. Farver... 11 Tidsplan.... Afgrænsning.....4 Research...5 Idégenerering....6 Navn / identitet...7 Logo.....8 Logo....9 Logo.... 0 Farver.... Logo.4... Merchandise..... Brochure.... 4 Brochure..... 5 Brochure..... 6

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

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

det færdige resultat

det færdige resultat grafisk design Under dette fagområde har jeg valgt at præsentere jer for en opgave, jeg har udarbejdet for virksomheden Breinholt. Breinholt er en nyopstartet virksomhed i Odense, der tilbyder spirituel

Læs mere