version 6 / Open / Designmanual til EfterUddannelse.dk

Transkript

1 version 6 / Open / Designmanual til EfterUddannelse.dk

2 Indeks SIDE EMNE SIDE EMNE INTRO 4 Præmisser for EfterUddannelse.dk 4 Tekniske præmisser for løsningen 4 Præmisser for de visuelle retningslinier SITE MAP 6 Samlet site map for EfterUddannelse.dk 7 Site map for VEU-tilmeldingsflow 8 Site map for VEU-ansøgningsflow Generelle VISUELLE RETNINGSLINIER 11 Navnetræk og pay-off 11 Afsendere 12 Identitetsfarve 12 Sekundær farver 13 Typografi 14 Placering af website i henhold til browservinduet 15 Grid 16 Header og footer 17 Globale menuer 19 Søgebar 21 Knapper 22 Links 22 Brødkrumme 23 Train 24 Ikoner 1. Kursussøgning Forside Login side Login side - admin Om EfterUddannelse.dk Hjælp Søgning - Fritekst med tilpas søgning Søgning - Geografisk visning mouseover Søgning - Kortvisning Søgning - Kategori Kursusbeskrivelse - Enkelt fag Kursusbeskrivelse - Flere fag Kurv Kurv - åbent værksted Tilmelding forside A Tilmelding forside B 2. KURSISTENS SIDER Kursist - Tilmelding step x-y / 2.3 Kursist - VEU-ansøgning step x-y Kursist - Kursusoversigt Kursist - Kursusbeskrivelse med dokumentoversigt 3. VIRKSOMHEDENS SIDER Virksomhed - Tilmelding step Virksomhed - Kursusoversigt kommende/afholdte Virksomhed - Kursusbeskrivelse med kursister og dokumentoversigt Virksomhed - Indtastning/overblik Virksomhed - Masseindtastning Virksomhed - Signering af arbejdsgivererklæring Virksomhed - Kursistoversigt Virksomhed - Indstillinger 4. VEu administrationens sider for a-kasser og skoler VEU admin - Ulæste ansøgninger VEU admin - Vis ansøgning med tilstedeværelse Designmaunal / version 6 / / 2

3 SIDE EMNE VEU admin - Læste ansøgninger VEU admin - Vis kursist tilstedeværelse 5. skolens sider til udsendelse af breve Skole - Holdoversigt med søgning Skole - Oversigt over breve til hold Skole - Tilføj dokument/skabelon fra arkiv Skole - Generer udsendelse Skole - Generer VEU ansøgning / Skole - Udsendelse kvittering Skole - Genbestil VEU skema til print Skole - Opret SMS Skole - Opret Skole - Skabelon- og dokumentoversigt Knapper til skolernes hjemmeside 125 Knapper til skolernes hjemmeside Designmaunal / version 6 / / 3

4 Intro Designmaunal / version 6 / / 4

5 Præmisser for Efteruddannelse.dk Tekniske præmisser for løsningen Præmisser for de visuelle retningslinier Effektivisering Det overordnede formål med Efteruddannelse.dk er at digitalisere og hermed effektivisere tilmeldingen til VEU-kurser og ansøgninger om VEU-godtgørelsen fra virksomheder og private. Bred målgruppe Portalen henvender sig til mange meget forskellige typer brugere med større eller mindre grad af IT kendskab. Brugerne skal på sigt benytte portalen på forskellig vis. Målgrupperne inkluderer små og store virksomheder med og uden HR personer (som typisk vil være dem, der booker kurserne) private med meget forskellig uddannelsesmæssig baggrund. sagsbehandlere hos A-kasser administrative medarbejdere på uddannelsesstederne Baseret på data fra EASY-A Det er data fra EASY-A, som er grundlaget for kursuskataloget og de metadata der ligger til grund for søgningen på Efteruddannelse. dk. ADF Løsningen er udviklet med udgangspunkt i ADF komponenter. Der er i designet taget højde for de begrænsninger og muligheder dette medfører. Under hele designforløbet har der være et tæt samarbejde med ADF eksperter, med henblik på at opnå det bedst mulige resultat. Tilgængelighed Der er krav om at løsningen, så vidt muligt, skal overholde WCAG 2.0. I de tilfælde hvor kravene til tilgængelighed måtte gøre løsningen mindre brugervenlig, laves der en alternativ version, der overholder tilgængelighedskravene. Der tilstræbes dog at benytte så mange handicapvenlige funktioner som muligt, så længe det ikke er på bekostning af god brugervenlighed. Designmanual Der er taget beslutning om at designet af Efteruddannelse.dk skal lægge sig op ad designet på Optagelse.dk, og samtidigt følge UNI.C s designmanual. Dette er løst med et design, der visuelt er i familie med Optagelse.dk men som tager udgangspunkt i UNI.C s designmanual herunder grids og farver Designmaunal / version 6 / / 5

6 Site maps Designmaunal / version 6 / / 6

7 Site maps Samlet site map for EfterUddannelse.dk VEU SITEMAP Login side admin (efteruddannelse.dk/admin) Skole login Upload dokument VEU admin login 4 VEU ADMINISTRATIONENS SIDER FOR A-KASSER OG SKOLER 5.0 Skole - Holdoversigt med søgning 5.2 Skole - Skabelon- og dokumentoversigt 5.1 Skole - Oversigt over breve til hold (+ 5.2) Skole - Generer udsendelse Skole - Tilføj dokument/skabelon 4.0 VEU admin - ulæste ansøgninger 4.1 VEU admin - læste ansøgninger 4.2 VEU admin - vis kursist tilstedeværelse VEU admin - vis ansøgning m tilstedeværelse Upload dokument 5 SKOLENS SIDER TIL UDSENDELSE AF BREVE Skole - Generer VEU ansøgning Skole - Genbestil VEU skema til print Skole - Opret SMS Skole - Opret Print PDF 1.1 Login side Skole - Udsendelse kvittering 1 KURSUSSØGNING 1.2 Om efteruddannelse.dk 1.3 Hjælp Kursist login 1.0 Forside Virksomhed - login 3 VIRKSOMHEDENS SIDER 2.0 Kursist - Tilmelding step x-y 1.4 Søgning - fritekst m. tilpas søgning 1.5 Søgning - kategorier 3.0 Virksomhed - tilmelding step Kursist - Kursusoversigt 1.41 Søgning - geografisk visning mouseover 1.42 Søgning - kortvisning 3.1 Virksomhed - kursusoversigt kommende 2.2 Kursist - Kursusbeskrivelse m dokumentoversigt 2.3 Kursist - VEU ansøgning step x-y Signering af VEU ansøgning 1.6 Kursusbeskrivelse enkeltfag 1. 7 Kursusbeskrivelse flere fag 3.2 Virksomhed - kursusoversigt afholdte 3.3 Virksomhed - kursistoversigt 3.11 Virksomhed - kursusbeskrivelse m kursister og dokumentoversigt 3.12 Virksomhed - indtastning/overblik 2 KURSISTENS SIDER 1.8 Kurv Kurv åbent værksted 1.9 Tilmelding forside 3.4 Virksomhed - indstillinger 3.13 Virksomhed - masseindtastning 3.14 Virksomhed - signering af arb. erkl. Flow - vises på de efterfølgende sider Sider hvor man skal være logget ind Eksterne sider 1.0 Forside 1.6 Kursusbeskrivelse Nummer og navn refererer til skærmbilldets navn Bold = Menupunkt/hovedside, Light = Underside Designmaunal / version 6 / / 7

8 Site map for VEU-tilmeldingsflow 2.0 Kursist - Tilmelding step x-y 3.0 Virksomhed - tilmelding step 0-3 PRIVATE TILMELDING STEP 0-5 SELVSTÆNDIGE TILMELDING STEP 0-5 LEDIGE TILMELDING STEP 0-1 VIRKSOMHED TILMELDING STEP 0-3 Privat_tilmelding_0a (Tilmeldingsforside) Privat_tilmelding_0b (Tilmeldingsforside) Privat_tilmelding_0c (Tilmeldingsforside) Selvstændige_tilmelding_0 (Tilmeldingsforside) Selvstændige_tilmelding_1 Selvstændige_tilmelding_2 Selvstændige_tilmelding_3 Ledige_tilmelding_0 (Tilmeldingsforside) Ledige_tilmelding_1 Virksomhed _tilmelding_0 Virksomhed _tilmelding_1 Virksomhed _tilmelding_2 Virksomhed _tilmelding_3 Privat_tilmelding_1 Privat_tilmelding_2a Selvstændige_tilmelding_4a Selvstændige_tilmelding_4b 3.1 Virksomhed - kursusoversigt kommende (ved tilmelding til flere hold) 3.11 Virksomhed - kursusbeskrivelse m kursister og dokumentoversigt (ved tilmelding til ét hold) Privat_tilmelding_2b Selvstændige_tilmelding_5 Privat_tilmelding_3a Selvstændige_tilmelding_6 Privat_tilmelding_3b Privat_tilmelding_4a Privat_tilmelding_4b Privat_tilmelding_5 Privat_tilmelding_6 Søger VEU nu 2.3 Kursist VEU ansøgning step x-y Søger IKKE VEU nu 1.0 Forside (hvis ikke logget ind) 2.1 Kursist - Kursusoversigt (hvis logget ind) 2.4 Kursist - Signering af VEU ansøgning (hvis logget ind) 1.0 Forside (hvis ikke logget ind) Designmaunal / version 6 / / 8

9 Site map for VEU-ansøgningsflow 2.3 Kursist - VEU ansøgning step x-y PRIVATE VEU ANSØGNING STEP 1-11 Private_VEU ansøgning_1a Private _VEU ansøgning_1b Private_ VEU ansøgning_2 Private_VEU ansøgning_3a Private_VEU ansøgning_3b SELVSTÆNDIGE VEU ANSØGNING STEP 1-4 Selvstændige_VEU ansøgnin_1 Selvstændige_VEU ansøgning_2a Selvstændige_VEU ansøgning_2b Selvstændig_ VEU ansøgning_3 Selvstændig_ VEU ansøgning_4 Private_VEU ansøgning_4 Private_VEU ansøgning_5a Private_VEU ansøgning_5b Private_VEU ansøgning_5c Private_VEU ansøgning_6a Private_VEU ansøgning_6b Private_VEU ansøgning_7 1.0 Forside Private _VEU ansøgning_8 Private_VEU ansøgning_9a Private_VEU ansøgning_9b Private_VEU ansøgning_10 Private_VEU ansøgning_11 Designmaunal / version 6 / / 9

10 Generelle visuelle retningslinier Designmaunal / version 6 / / 10

11 Navnetræk og pay-off Designet af navnetrækket er lavet udfra at det skal have samme udseende som navnetrækket for Optagelse.dk. Afsendere Portalens afsendere er henholdsvis Undervisningsministeriet og UNI C. Undervisningsministeriet er placeret som en overordnet afsender i headeren for at legitimere portalens indhold og give brugeren tryghed. UVM - Primær afsender 123px Placering Navnetrækket med pay-off er venstrestillet i øverste venstre hjørne. Det er alignet med UVM s navnetræk og har samme højde. Placering Højrestillet i øverste højre hjørne og alignet med portalens navnetræk. afstande Til top: 30px Til menu: 113px 41px afstande Til top: 30px Til menu: 113px 249px UNI C - Sekundær afsender Muligheder for fremtiden 41px Placering Højrestillet i nederst højre hjørne. Logoets størrelse og placering er identisk med logoets størrelse og placering på Optagelse.dk. 190px 12px afstande Til indholdsfelt: 20px Til bund: 77px Designmaunal / version 6 / / 11

12 Identitetsfarve Der er til EfterUddannelse.dk valgt en enkelt farveholdning for at skabe visuelt ro over et site der skal håndtere og vise kompleks data. Den orange farve (-gradient) er portalens gennemgående identitetsfarve og skal signalere varme og imødekommenhed. Sekundære Farver Den orange gradient suppleres med henholdsvis en blå og en grå farveskala. Lys blå #e3f2fa Mellem blå #abd2eb Mørk blå #00457e Hvid #fffff Mørk grå # 2b2f35 Orange gradient Hex Bund: #e38700 Top: #efac37 Lys grå 1 #f5f5f5 Lys grå 2 #dddddd Lys grå 3 #cccccc Mellem grå 1 #b1b1b1 Mellem grå 2 # Rød #da482b Grøn #5db242 Designmaunal / version 6 / / 12

13 Typografi Arial er skriftgrundlaget for EfterUddannelse.dk Font-family:arial, sansserif. Størrelser og styles Farver 9px Arial Arial Arial Arial 10px Arial Arial Arial Arial 11px 12px Arial Arial Arial Arial Arial Arial Arial Arial Hvid #fffff Mellem grå 2 # Mørk grå #2B2F35 Mørk blå #00457e 13px Arial Arial Arial Arial 14px 16px Arial Arial Arial Arial Arial Arial Arial Arial 18px Arial Arial Arial Arial 20px 22px Arial Arial Arial Arial Arial Arial Arial Arial Designmaunal / version 6 / / 13

14 Placering af website i forhold til browservindue 1. Websitet er optimeret til en 1024x768px. skærmopløsning. 2. Websitet har en fast bredde på 980px. 3. Websitet er horisontalt centreret i browservinduet.. Designmaunal / version 6 / / 14

15 Grid Afstand til toppen 30px 980px Header 40px Baggrunden for portalens grid er et femspaltet system, der anvendes i kombinationerne 3:2-spalter og 4:1-spalter. Sidens minimumshøjde er 578px. 30px 10px Venstre menu Søgebar Højre menu 26px 100px 20px Toppen Højden er variabel 10px 10px 10px 10px 10px 10px Højden på dette felt vil i nogle situationer være variabel og andre gange er der fastsat en fast højde. Det vil fremgå i gennemgangen af de forskellige skærmbilleder hvordan højden opfører sig. 184px 184px 184px 184px 184px Bunden Bunden er 10px/20px/70px i højden alt efter case, hvilket vil fremgå i de forskellige gennemgange af skærmbillederne. 20px Footer 12px Afstand til 70px Designmaunal / version 6 / / 15

16 Header og footer 980px De to navnetræk, EfterUddannelse.dk og UVM, er horisantalt alignet. De har samme højde og samme afstand til toppen og de to globale menuer. 30px 30px 41px Afsender aligner vertikalt i forhold til indholdboksen 20px 12px Aftand til bunden: 70px Designmaunal / version 6 / / 16

17 Globale menuer 30px 10px 26px De to globale menuer er horisontalt alignet i forhold til hinanden. Højremenu / Command Link Arial, Regular, 10px, # Understregning ved mouseover 5px 21px 5px Designmaunal / version 6 / / 17

18 Venstremenu / Command Link Venstremenuen skifter karakter alt efter hvor på sitet man befinder sig - se eksemplerne herunder. Version 1 Version 1 viser den primære måde hvorpå venstremenuen anvendes. Menuens karakter skifter i tilmeldings- og ansøgningsflows - se version 2. Underoverskrift Arial, Regular, 10px, # Overskrift / command link Arial, Bold, 13px, #00457e 1px streg / # Dynamisk tekst - se version 2 26px Understregning: Mouseover + valgt link logud Arial, Regular, 10px, #00457e 50px 50px Dynamisk tal 50px Variabel Variabel Variabel Version 2 Version 2 anvendes på Min side for virksomheder og private. Version 3 Version 3 anvendes i ansøgnings- og tilmeldingsflows, 4. VEU administrationens sider for a-kasse og skoler samt 5. Skolens sider til udsendelse af breve. Designmaunal / version 6 / / 18

19 Søgebar Søgebaren vises enten i udfoldet eller sammenfoldet tilstand. Søgebaren optræder ikke på VEU-admin siderne (skoler+a-kass) og i flows. Sammenfoldet søgebar Den sammenfoldede søgebar vises default når brugeren logger sig ind - derefter kan brugeren selv aktivere den. mørkt felt Hvid pil: placeret 5px fra venstre side og horisontalt centreret tekst Arial, Bold, 9px, uppercase, #ffffff. Horisontalt centreret og placeret 5px fra den hvide pil. 27px 980px Designmaunal / version 6 / / 19

20 Udfoldet søgebar Den udfoldede søgebar vises på de offentlige sider, når brugeren ikke er lgget ind - så snart brugeren er logget ind vises den default sammenfoldet tilstand. Find kurser Arial, Bold, 24px, Tracking -60, #ffffff, vertikalt centreret i søgebaren. Hvor? Arial, Bold, 24px, Tracking -60, #ffffff, vertikalt centreret i søgebaren. Hjælpetekst Arial, Regular, 16px, #2B2F35. Vertikalt centreret i inputfeltet og venstrestillet 10px fra inputfeltets venstre side. Hjælpetekst Arial, Regular, 16px, #2B2F35. Vertikalt centreret i inputfeltet og venstrestillet 10px fra inputfeltets venstre side. Vejledende tekst Arial, Bold, 10px, #ffffff. Venstrestillet og placeret 5px fra inputfeltets bund Vejledende tekst Arial, Bold, 10px, #ffffff. Venstrestillet og placeret 5px fra inputfeltets bund 20px 100px 20px 20px 20px 20px 20px 20px 980px Fold-ud-knap Input felt med autocompletion Dropdown Søgeknap og pil tekst Arial, Bold, 9px, #2b2f35. Horisontalt centreret og placeret 5px fra den sort pil. mørkt felt Feltet der angiver knappen er en del af søgebarens - altså et grafik lag. Højde: 19px / Bredde: 89px sort pil Placeret 5px fra venstre side og horisontalt centreret Input felt og tekst Bredde: 345px. Højde: 36px. Hvidt felt med en grå steg på 1px og i farven #2B2F35. 90% transperance på det udfoldede hvide felt. Liniehøjde: 150 %, autocompletion, Centreret i inputfeltet og venstrestillet 10px fra venstre side af inputfeltet. dimensioner Bredde: 345px. Højde: 36px. Hvidt felt med en grå steg på 1px og i farven #2B2F35. 90% transperance på det udfoldede hvide felt. Liniehøjde: 150 %, Søgeknap Bredde: 162px / højde: 62px. Vertikalt centreret i søgebaren. Gradient: bund - #E38700 / top - #EFAC37. Pilen Pilen er et grafik element der centreres i forhold til søgeknappen ved visning af søgeresultater og kursusbeskrivelser. Designmaunal / version 6 / / 20

21 Knapper Aktive knapper 10px 10px 10px 10px 10px 10px 30px 42px Tekst Arial, Bold, 11px, #ffffff, vertikalt centreret. Længden er variabel Længden er variabel Baggrund med gradient Top - #EFAC37 Brund - #E38700 Inaktive knapper Baggrund med gradient Top - #f7d59a Brund - #f1c380 Lille søgeknap 10px 10px 10px 30px Baggrund med gradient Top - #EFAC37 Brund - #E px Designmaunal / version 6 / / 21

22 Links Brødkrumme Link med knap-funktion De links der har en knap-funktion er angivet med en pil før eller efter en givende tekst. Tekststørelsen er casebestemt (11 eller 13px) og vil blive præsenteret i forhold dertil. blå tekst Arial, Regular, 10px, #00457e grå tekst Arial, Regular, 10px., # Tekst / Pil Arial, #00457e, pilen holder bund med teksten og er placeret 5px derfra. Eksterne links De links der befinder sig i brødteksten angives med den blå farve #00457E. Linket understreges ved mouseover og punktstørrelsen defineres af brødteksten. placering Vertikalt centreret mellem søgebaren og indholdsfeltet. Venstrestillet 20px fra den lyseblå bokses kant. Designmaunal / version 6 / / 22

23 Train Stepfunktionen viser hvor i tilmeldings- eller ansøgningsformularen brugeren er. Stepfunktionen er låst således at brugeren ikke kan gå frem eller tilbage i forløbet. Hvis dette ønskes kan knapperne videre og fortryd placeret nederst i formularen anvendes. Afstanden mellem boksene 7px 24px Placering Højrestillet og placeret 14px fra toppen af det lyseblå felt samt 14px over det mørkeblå overskriftsfelt. 24px Lyseblå Boks Boksen viser det step brugeren ikke er på. Farven er #abd2eb og boksen har runde hjørner. blåt tal Arial, Bold, 18px, #abd2eb Centreret i boksen blå Boks Boksen viser det step brugeren er på. Farven er #abd2eb og boksen har runde hjørner. Hvidt tal Arial, Bold, 18px, #ffffff Centreret i boksen Designmaunal / version 6 / / 23

24 Ikoner EfterUddannelse.dk anvender en række ikoner i situationer hvor der er behov for hurtig eller ekstra hjælpende kommunikation. Om EfterUddannelse.dk Kort Hjælp OBS Kategori / Underkategori / Mappe Søg Et kursus / Dokument Fjern / Luk Kalender Besked Frem- og tilbagepil Designmaunal / version 6 / / 24

25 1. Kursussøgning Designmaunal / version 6 / / 25

26 1.0 Forside Header Venstre menu Højre menu Søgebar Lyseblåt felt #E3F2FA 10px 73px 406px 406px 313px 10px 1 49px 572px Mellem blåt felt #E3F2FA 378px 20px Footer Designmaunal / version 6 / / 26

27 Overskrift Arial, Regular, 18px, #2B2F35 Venstrestillet og placeret 20px fra det blå felts top samt 20px fra venstre side af det blå felt. Underoverskrift Arial, Regular, 11px, #2B2F35 Venstrestillet 20px fra venstre side af det blå felt. Placeret 10px under overskriften. Billede / Film Højden er 205px og bredden er 358px. Billedet/filemen er vertikalt centreret i det hvide felt og placeret 10px fra feltets top (højre- og venstremargin er ligeledes 10px). kategori-ikon Ikonerne er placeret 10px fra venstre side af det hvide felt samt 20px fra toppen af det hvide felt. Afstandsintervallet mellem kategori-ikonerne er 14px. Ved to linier tekst er afstanden 30px. Teksten er centreret i forhold til ikonerne. Kategori-tekst Arial, Regular, 12px, #00457e. Venstrestillet og centreret i forhold til kategori-ikonet samt placeret 10px derfra. Ved to linier i teksten er første tekst centreret med ikonet og linieafstanden er 16px. Hvid tekst Arial, Regular, 12px, #ffffff. Vertikalt centreret i forhold til det blå felt. Venstrestillet og placeret 10px fra det blå felts venstre side. Link/ pil Arial, Regular, 12px, #00457e. Vertikalt centreret i forhold til det blå felt. Venstrestillet og placeret 5px fra den hvide tekst. Understregning ved mouseover. Pilen er placeret 5px fra teksten. Tool tip - hjælpetekst til kategorierne Højden er variabel dvs. den afhænger af tekstmængde. Bredden er 235px og den indre-margin er 10px i toppen, i bunden, til højre og til venstre. Boksen har en grå steg på 1px i farven #2B2F35. Pilen på boksen er centreret i bunden. Billede-/Filmtekst Arial, Regular, 12/18px, #2B2F35. Placeret 10px fra billedet. Højre- og venstremargin er ligeledes 10px. link Arial, Regular, 12px, #00457e. Højrestillet og placeret 10px over det hvide felts bund og 10px fra højre side af det hvide felt. Designmaunal / version 6 / / 27

28 1.1 Login side Header Venstre menu Højre menu Søgebar 50px 47px Mellem blåt felt #E3F2FA Siden her er designet til sitets minimumshøjde: 578px 30px 20px Højden er variabe i forhold til mængden af indhold. 286px 30px Bredde776px 10px 30px Footer Designmaunal / version 6 / / 28

29 sort overskrift Arial, Regular, 18px, #2B2F35. Venstrestillet og placeret 20px fra det blå felts top samt 20px fra venstre side af det blå felt. Hvid overskrift Arial, Bold 14px, #ffffff. Vertikalt centreret i det blå felt. Venstrestillet og placeret 10px fra det hvide felts venstre side. spørgsmål Arial, Regular, 18px, #2B2F35. Venstrestillet i forhold til venstremargin. Afstanden til radio buttonen er 20px. radio buttons Standard windows komponent: 13x13px. Grå steg: 1px, #2B2F35. Venstrestillet i forhold til venstremargin. Afstanden til næste radio buttonene er 20px under sidste tekstlinie. Hjælpetekst - brødtekst Arial, Regular, 11/17px., #2b2f35. Tekstens topmargin er 50px hvor højre- og venstremargin er 10px. Tekstkolonnensbredde er 184px - dvs. en spaltebredde. radio button - tekst Arial, Regular, 12px, #2B2F35. Venstrestillet 10px fra radio button og vertikalt centreret i forhold til radio button. Uddybende grå tekst Arial, Regular, 11/14px, # Placeret 5px under radio button- tekst. Orange knap Højrestillet i forhold til højremargin. Placeret 30px over bunden af det hvide felt. Designmaunal / version 6 / / 29

30 1.1.1 Login side - admin tekiske detaljer Se alle tekniske detaljer i afsnittet 1.1 Login side Designmaunal / version 6 / / 30

31 1.2 Om EfterUddannelse.dk Header Venstre menu Højre menu Søgebar 10px 50px 10px 20px 10px Højden er variabel i forhold til tekstmængde. Den indre margin er 10px til højre, til venstre, i toppen og i bunden 378px 1 Højden er variabel i forhold til tekstmængde Højden er variabel i forhold til tekstmængde. Den indre margin er 10px til højre, til venstre, i toppen og i bunden 10px 572px 378px 20px 20px Footer Designmaunal / version 6 / / 31

32 sort overskrift Arial, Regular, 18px, #2B2F35. Venstrestillet og placeret 20px fra det blå felts top samt 20px fra venstre side af det blå felt. Overskrift Arial, Regular, 22/25px., #2B2F35. Teksten er venstrestillet. manchet Arial, Bold, 12/18px., #2B2F35. Teksten er venstrestillet. Afstanden mellem overskrift og manchet er 30px. Afstanden til brødteksten er 25px. underoverskrift Arial, Bold, 12/18px., #2B2F35. brødtekst Arial, Regular, 12/18px, #2B2F35. Afstanden mellem afsnittene er 20px. Billede / Film Højden er 205px og bredden er 358px. Billedet/filmen er vertikalt centreret i det hvide felt og placeret 10px fra feltets top. Billede-/Filmtekst Arial, Regular, 12/18px, #2B2F35. Placeret 10px under billedet og venstrestillet. Relaterde links - overskrift Arial, Bold, 14/20px., #2B2F35. Teksten er venstrestillet. Relaterde links - brødtekst Arial, Regular, 12/20px., #2B2F35. Teksten er venstrestillet. Relaterde links - link Arial, Regular, 12px, #00457e. Understregning ved mouseover. Designmaunal / version 6 / / 32

33 1.3 Hjælp Listevisning med fold-ud funktion Header Venstre menu Højre menu Søgebar 50px 47px 47px 20px Højden er variabel i forhold til mængden af spørgsmål. 35px Boksens højde i udfoldet tilstand er variabel i forhold til mængden af teksten. 286px 20px 2px 20px 776px Footer Designmaunal / version 6 / / 33

34 sort overskrift Arial, Regular, 18px, #2B2F35. Venstrestillet og placeret 20px fra det blå felts top samt 20px fra venstre side af det blå felt. Hvid overskrift Arial, Bold 14px, #ffffff. Vertikalt centreret i det blå felt. Venstrestillet og placeret 10px fra det hvide felts venstre side. hjælpe-ikon Ikonet er vertikalt centreret i det hvide felt. Ikonet er placeret 10px fra det hvide felts venstre side. Teksten er vertikalt centreret i forhold til ikonet. Hjælpetekst - brødtekst Arial, Regular, 11/17px., #2b2f35. Tekstens topmargin er 50px hvor højre- og venstremargin er 10px. Tekstkolonnensbredde er 184px - dvs. en spaltebredde. Klikbart blåt spørgsmål Arial, Regular, 14px, # 00457e. Venstrestillet 10px fra og vertikalt centreret i forhold til hjælpeikonet. svar på spørgsmål - fold ud tekst Arial, Regular, 11/17px, #2b2f35. Placeret 13px under det blå spørgsmål. Designmaunal / version 6 / / 34

35 1.4 Søgning Fritekst med tilpas søgning Header Venstre menu Højre menu Søgebar 50px 47px 47px 51px 776px 10px 10px 421px 10px 184px 2px 10px Højde er variabel i forhold til mængden af kursusresultater/søgningsresultater. 10px eller 80px Footer Designmaunal / version 6 / / 35

36 radio button 1 Standard windows komponent Radius: 13px. Horisontalt centreret i det blå felt og venstrestillet 623px fra det blå felts venstre kant. sort overskrift Arial, Regular, 18px, #2B2F35. Venstrestillet og placeret 20px fra det blå felts top samt 20px fra venstre side af det blå felt. kursus-ikon Placeret 10px fra det hvide felts venstre side og 15px fra det hvide felts top. Kursusnavnet er horisontalt centreret i forhold til ikonet. Kursusnavn Arial, Regular, 14px, # 00457e. Venstrestillet 10px fra og horisontalt centreret i forhold til ikonet. Hold Arial, Regular, 14px, # Venstrestillet 5px fra kursusnavnet. kort-ikon Ikonet er horisontalt centreret i forhold til adressen og placeret 5px derfra. tekst Arial, Regular, 10px. #FFFFFF. Venstrestillet 5px fra radio button. Horisontalt centreret i forhold til radio button. radio button 2 Venstrestillet 709px fra det blå felts venstre kant. Horisontalt centreret i det blå felt. Vejledende tekst Arial, Italic, 10px. #2b2f35. Vertikalt centreret i det blå felt og horisontalt centreret i forhold til tilpas søgningen feltet (Spaltebredde:184px). Hvid overskrift Arial, Bold 14px, #FFFFFF, vertikalt centreret i det blå felt. Venstrestillet og placeret 10px fra det hvide felts venstre side. Hvid overskrift Arial, Bold 14px, #ffffff. Vertikalt centreret i det blå felt. Venstrestillet og placeret 10px fra det hvide felts venstre side. søge-ikon Vertikalt centreret i det blå felt og højrestillet 10px fra det blå felts højre kant. navn på uddannelsessted og Adressen på undervisningsstedet Arial, Regular, 10px, #888888, venstrestillet. Vertikalt alignet med kursusnavnet og placeret 5px derunder. Designmaunal / version 6 / / 36

37 Interaktivt Danmarkskort På det interaktive Danmarkskort kan man vælge den region inden for hviklen man gerne vil søge efter kurser. Afstanden til toppen er 10px #ABD2EB Ramme: #E3F2FA 203px Mouseover/valgt felt: #00457E Stiblet linie Bredden er 163px og tykkelsen er 1px. Farve er #2B2F35. Den stiblede linie adskiller de forskellige elementer. Afstanden til et element er 10px - dvs. 10px over og under linien. Afstanden mellem de to dropdown er 10px. Afstanden til bunden er 10px 166px Designmaunal / version 6 / / 37

38 Drop down De drop down elementer som Tilpas søgning indeholder er standard windows komponenter. Elementet anvendes med og uden en overskrift - her er vist et eksempel med overskrift. Input date 26px 55px 12px 3px 162px 4px 5px Grå streg #2B2F35 26px Overskrift Arial, Bold, 10px, #2B2F35. Venstrestillet og placeret 4px over drop down elementet input tekst Arial, Regular, 11px, #2B2F35. Vertikalt og horisontal centreret i input feltet. Overskrift Arial, Bold, 10px, #2B2F35. Venstrestillet og placeret 5px over drop down elementet. Hjælpetekst Arial, Regular, 12px., #2B2F35. Vertikalt centreret og venstrestillet 5px. fra venstre side. input felt Hvidt felt, 72x26px, med 1px grå kant i farven #2B2F35. Kalender-ikon Horisontalt centreret i forhold til indtastningsfeltet og placeret 4px. til højre for input feltet. Designmaunal / version 6 / / 38

39 Choose date Kalenderen er et ADF-komponent med modifikationer. Tilbage-ikon Frem-ikon 14px 12px 210px 12px 21px 10px Kasse Bredden er 25px og højde er 17px. Grå streg er 1px og farven er #2b2F px 10px 7px 10px Elementerne er horisontalt centreret i forhold til hinanden. 12px Ugens dage Arial, Regular, 11px, #ffffff, vertikalt centreret i det blå felt. Kalenderen folder sig ud 10px under det lille kalender-ikon. Kelender aligner med det ikonet højre side. 12px 17px Dato er vertikalt centreret i forhold til ugens dage Dato Hverdag: Arial, Bold, 9px., #2B2F35. Weekend: Arial, Bold, 9px., # Designmaunal / version 6 / / 39

40 bladrefunktion og visninger pr. side De to funktioner vises hvis der er mere end 15 søgeresultater - dvs. at højden for dette felt er 80px når de to funktioner vises og 10px når der vises 15 søgeresultater eller derunder. De to funktioner er horisontalt centreret i forhold til det hvide felt og vertikalt centreret i bunden af det blå felt. Blandrefunktionen er placeret 10px under det hvide felt og Visninger pr.side er placeret 12px under bladrefunktionen. Sidetal - ikke vist side Arial, Regular, 13px. #2B2F35 Sidetal - vist side Arial, Regular, 13px. #ffffff Tekst & tal Arial, Regular, 10px. #2B2F35 15px 5px 15px 10px10px Tilbage-ikon frem-ikon radio buttons Standard windows komponent Radius: 13px Hvid streg Højde: 12px Tykkelse: 1px #ffffff Designmaunal / version 6 / / 40

41 1.4.1 Søgning Geografisk visning mouseover Tool tip med google maps Elementet her aktiveres ved mouseover på kort-ikonet i listevisningen. 225px 10px 205px 10px Grå kant 1px, # pil Midterstillet i forhold til højden 155px Højden er variabel i forhold til antallet af tekstlinier. mørk Grå kant 1px, #2B2F35 Bund: 10px Uddannelsesstedets navn Arial, Bold, 11px, #2b2f35. Horisontalt centreret i forholdt til kortet. Placeret 10px under kortets bund. Undervisningsstedets adresse Arial, Regular, 10px, #2b2f35. Horisontalt centreret i forholdt til kortet. Placeret 10px under skolenavnet og 10px over tool tip ets bund. Designmaunal / version 6 / / 41

42 1.4.2 Søgning Kortvisning zoom funktioner Elementer fra google maps Grå kant 1px, #2B2F35 520px 766px Designmaunal / version 6 / / 42

43 1.5 Søgning Kategorier Header Venstre menu Højre menu Søgebar 50px 47px 47px Underkategorier til kategorier fra forsiden 47px 10px 421px 10px 10px 2px 776px 184px 20px 47px Kurser 10px Højde er variabel i forhold til mængden af kursusresultater/søgningsresultater 51px 2px 776px 79px Footer Designmaunal / version 6 / / 43

44 underkategori-ikon Placeret 10px fra det hvide felts venstre side og horisontalt centreret i det hvide felt. underkategori Arial, Regular, 14px, # 00457e. Venstrestillet 10px fra og horisontalt centreret i det hvide felt. antal kurser Arial, Regular, 14px, # Venstrestillet 5px fra kursusnavnet. - står på linie med underkategori-tekst. kurser Se tekniske informationer i afsnittet 1.4 Søgning. Designmaunal / version 6 / / 44

45 1.6 Kursusbeskrivelse Enkelt fag Header Venstre menu Højre menu Søgebar 50px 20px 10px 177px 20px 373px 10px Højden er variabe i forhold til mængden af indhold. Feltet er delt i to kolonner, hvor anden kolonne yderligere er opdelt i to. 177px 10px 177px 776px 10px 30px Footer Designmaunal / version 6 / / 45

46 sort overskrift Arial, Regular, 18px, #2B2F35. Venstrestillet og placeret 20px fra det hvide felts top og 10px fra dets venstre side. Link med knap funktion Arial, Bold, 13px, #00457E, venstrestillet, pilen er placeret 5px fra teksten. Uddannelsessted - navn Arial, Bold, 12/18px, #2B2F35, venstrestillet. Placeret 20px under linket. Uddannelsessted - adresse Arial, Regular, 12/18px, #2B2F35, venstrestillet. link Arial, Regular, 12/18px, # 00457E, venstrestillet og placeret 5px under adressen. Hjælpetekst - brødtekst Arial, Regular, 11/17px., #2b2f35. Tekstens topmargin er 50px hvor højre- og venstremargin er 10px. Tekstkolonnensbredde er 184px - dvs. en spaltebredde. Hjælpetekst - overskrift Arial, Bold, 11/17px., #2b2f35, venstrestillet. Overskrift Arial, Regular, 22px, #2B2F35, venstrestillet. Placeret 40px under navn og adressen for undervisningsstedet. manchet Arial, Bold, 12/18px, #2B2F35, venstrestillet. Afstanden mellem overskrift og manchet er 20px og afstanden til fagnummeret er 30px. Fagnummer Arial, Regular, 10/18px, #2B2F35, venstrestillet. underoverskrift Arial, Bold, 12/18px., #2B2F35, venstrestillet. brødtekst Arial, Regular, 12/18px, #2B2F35, venstrestillet. Designmaunal / version 6 / / 46

47 363px Afstanden mellem elementerne her og højre side af det hvide felt er 10px Afstanden fra det grå felt til toppen af det hvide felt er 50px 41px 10px print-ikon / print Printikonet er placeret 20px under det hvide felt top og 20px fra højre side af det hvide felt. Teksten er horisontalt centreret i forhold til ikonet.print er skrevet med Arial, Regular, 10px, #2B2F35. Teksten er placeret 5px fra ikonet. sort overskrift Arial, Bold, 12px, #2B2F35. Venstrestillet og placeret 10px fra venstre side af det grå felt. Vertikalt centreret i det grå felt. zoom knapper Elementer fra google maps 221px Dropdown-felt Hvidt felt hvor bredden er 177px og højden er 26px.Den grå steg er 1px og farven er #2B2F35. Dropdown - tekst Arial, Regular, 12px, #2b2f35. Vertikalt centreret i feltet og venstrestillet 5px fra venstre side. 10px Undervisningssted - navn Arial, Bold, 12/18px, #2B2F35, venstrestillet. Undervisningssted - adresse Arial, Regular, 12/18px, #2b2f35, venstrestillet. Stiblet linier / afstande i listen Bredden er 363px og tykkelsen er 1px. Farven er #2B2F35. De stiblede linier er placeret med en afstand til andet tekst på 10px. Dvs. en afstand på 10px over og under den stiblede linie. Link Arial, Regular, 12/18px #00457e, venstrestillet. Emneoverskrift Arial, Bold, 12px, #2B2F35, venstrestillet. Arial, Regular, 12px, #2b2f35, venstrestillet. 35px Link med knapfunktion Arial, Bold, 13px, #00457e. Pilen er placeret 5px fra teksten. Linket er højrestillet 25px fra højre side af det hvide felt. 15px Designmaunal / version 6 / / 47

48 1.7 Kursusbeskrivelse Flere fag dage/tillæg/priser - Arial, Regular, 11px, #2b2f35, vertikalt centreret i forhold til overskriften. FAGtitler Arial, Bold, 11px, #2B2F35, venstrestillet og placeret 15px under FAG. Afstanden mellem fag er 10px. dage/tillæg/priser - overskrift Arial, Bold, 11px, #2b2f35, vertikalt centreret i forhold til overskriften. hjælpe-ikon Horisontalt centreret i forhold til overskriften. Placeret 5px derfra. 120px Højden på siden er variabel i forhold til mængden af indhold. Bundmarginen er 30px. 25px Afstanden mellem de enkelte kurser er 25px. For information om styling af teksten, grid og listevisning se afsnittet 1.6 Kursusbeskrivelse - enkelt fag. Note Arial, Italic, 11px, #2b2f35, venstrestillet og placeret 10px under den stiblede linie og 20px over den orange knap. Designmaunal / version 6 / / 48

49 1.8 Kurv Header Venstre menu Højre menu Søgebar 50px 47px Højden er variabel i forhold til antal kurser. Feltets marginer er 20px i toppen og i bunden og 30px til højre og venstre side. info info info info info 95px Kurser 2px 30px Højden er variabel i forhold til antal kurser. Feltets marginer er 20px i toppen og i bunden og 30px til højre og venstre side. 30px Kurser 2px 133px 776px kurser total pris total Højden er variabel i forhold til mængden af kurser relaterede kurser 20px Footer Designmaunal / version 6 / / 49

50 sort overskrift Arial, Regular, 18px, #2B2F35. Venstrestillet og placeret 20px fra det blå felts top samt 20px fra venstre side af det blå felt. Holdtitel Arial, Regular, 14px, #00457e Venstrestillet i forhold til venstremargin. Placeret 20px under det hvide felts top. Kviknummer Arial, Regular, 11px, # Venstrestillet 10px fra holdtitlen, med hvilken den er på linie. kort-ikon Venstrestillet 10px fra adressen og horisontalt centreret i forhold til den. Startdato Arial, Regular, 12px, # Højrestillet i forhold til højremargin og placeret 20px under det hvide felts top. Antal dage / pris Arial, Regular, 10px, #2B2F35. Teksten er på linie med fagene til venstre. Prisen er højrestillet i forhold til højremargin, hvor dage er højrestillet 95px fra højre side af det hvide felt. Se forrige side for mere info omkring gridet. Hvid overskrift Arial, Bold 14px, #ffffff. Vertikalt centreret i det blå felt. Venstrestillet 10px fra det blå felts venstre side. kursus-ikon Ikonet er vertikalt centreret i forhold til holdtitlen. Ikonet er placeret 10px. fra det hvide felts venstre side. navn på uddannelsesstedet og Adressen på undervisningsstedet. Arial, Regular, 10px, # Placeret 5px. under holdtitelen. Venstrestillet i forhold til venstremargin. total pris 1 Arial, Bold, 10px, #2B2F35. Prisen er højrestillet i forhold til højremargin, og placeret 10px under den stiblede linie. fag Arial, Regular, 10px, #2B2F35. Placeret 10px. under navnet på uddannelsesstedet og adressen på undervisningsstedet. Venstrestillet i forhold til venstremargin.afstanden mellem to fag er 5px. Fjern / Tilmeld Arial, Regular, 10px, #2B2F35. Placeret 10px under den stiblede linie. Fjern er venstrestillet i forhold til venstremargin., hvor TILMELD er venstrestillet 85px fra venstre side af det hvide felt. Krydset er placeret 5px fra FJERN. Tjekboks Standard windows komponent: 13 X 13px. Grå steg: 1px, #2B2F35. Placeret 5px fra TILMELD. Tjekboksen er horisontalt centreret i forhold til TILMELD. stiblede linie Længde: 705px. Tykkelse: 1px. Farve: #2B2F35. Afstanden fra den stiblede linien til teksten ovenover er 20px hvorimod afstanden fra den stiblede linie til teksten nedenunder er 10px. Designmaunal / version 6 / / 50

51 Vejledende tekst Arial, Regular, 14/20px, #2B2F35. Tekstens topmargin er 50px hvor højre- og venstremargin er 10px. Tekstkolonnens bredde er 184px - dvs. en spaltebredde. Hjælpetekst - brødtekst Arial, Regular, 11/17px., #2b2f35. venstrestillet. Hjælpetekst - overskrift Arial, Bold, 11/17px., #2b2f35, venstrestillet. kurser i alt Arial, Bold, 14px, #2B2F35. Venstrestillet i forhold til venstremargin. Placeret 15px under toppen af det hvide felt. pris i alt Arial, Bold, 14px, #2B2F35. Højrestillet i forhold til højremargin. Placeret 15px under toppen af det hvide felt. Link Arial, Bold, 13px, #00457e. Venstrestillet i forhold til venstremargin. Horisontalt centreret i forhold til den orange knap. Afstanden mellem pil og tekst er 5px Orange knap Højrestillet i forhold til højremargin. Placeret 30px over bunden af det hvide felt. Designmaunal / version 6 / / 51

52 Se de tekniske detaljer for designet af denne del under afsnittet 1.5 Søgning - Kategorier. Den eneste forskel er farverne. Mellem grå 2 # Lys grå 3 #cccccc Designmaunal / version 6 / / 52

53 1.8.1 Kurv Åbent værksted 26px Grid / tekniske detaljer Se 1.8 kurv for flere informationer omkring grid, tekststyles og andre tekniske detaljer. 55px 12px 3px input tekst Arial, Regular, 11px, #2B2F35. Vertikalt og horisontal centreret i input feltet. input felt Hvidt felt: 72x26px. Grå kant: 1px, #2B2F35. 10px til det hvide felts højre kant Kalender-ikon Horisontalt centreret i forhold til indtastningsfeltet og placeret 4px. til højre for input feltet. Vælg start- og slutdato Arial, Regular, 12px, #2B2F35. Højrestillet 12px til venstre for det første input felt. Placeret 20px under det hvide felts top. Designmaunal / version 6 / / 53

54 1.9 Tilmeldingsforside A Header Venstre menu Højre menu Søgebar 50px 47px 30px Højden er variabe i forhold til mængden af indhold. 30px 30px 286px 776px 10px 30px Footer Designmaunal / version 6 / / 54

55 sort overskrift Arial, Regular, 18px, #2B2F35. Venstrestillet og placeret 20px fra det blå felts top samt 20px fra venstre side af det blå felt. hjælpe-ikon Horisontalt centreret i forhold til teksten og placeret 5px derfra Hvid overskrift Arial, Bold 14px, #ffffff. Vertikalt centreret i det blå felt. Venstrestillet 10px fra det blå felts venstre side. spørgsmål Arial, Regular, 18px, #2B2F35. Venstrestillet i forhold til venstremargin. Første spørgsmål er placeret 30px under det hvide felts top. De spørgsmål der følger er placeret 30px under den stiblede linie. radio buttons Standard windows komponent: 13x13px. Grå steg: 1px, #2B2F35. Venstrestillet i forhold til venstremargin. Afstanden fra en radio button til en anden afhænger af hvor meget tekst der er tilknyttet. Afstanden fra sidste tekstlinie til næste radio button er 20px. Hjælpetekst - overskrift Arial, Bold, 11/17px., #2b2f35, venstrestillet. Tekstens topmargin er 50px hvor højre- og venstremargin er 10px. Tekstkolonnens bredde er 184px - dvs. en spaltebredde. Hjælpetekst - brødtekst Arial, Regular, 11/17px., #2b2f35, venstrestillet. Afstanden mellem hver afsnit er 27px. link Arial, regular, 11/17px., #00457E, venstrestillet, understregning ved mouseover og placeret 7px under sidste brødtekst-linie. radio button - tekst Arial, Regular, 12px, #2B2F35. Venstrestillet 10px fra radio button og horisontalt centreret i forhold til radio button. grå tekst Arial, Regular, 11/14px, # Placeret 5px under den mørke grå tekst. Link Arial, Bold, 13px, #00457e. Venstrestillet i forhold til venstremargin. Horisontalt centreret i forhold til de to orange knapper. Afstanden mellem pil og tekst er 5px. stiblede linie Længde: 705px. Tykkelse: 1px. Farve: #2B2F35.Den stiblede linies afstand til tekst er 30px - dvs 30px til tekst over linien og 30px til tekst under linien. Orange knapper Højrestillet i forhold til højremargin. Afstanden mellem de to knapper er 10px. Den nederste knap er placeret 30px over det hvide felts bund hvor den øverste knap er placeret 30px under den stiblede linie. Designmaunal / version 6 / / 55

56 1.9 Tilmeldingsforside B Header Venstre menu Højre menu Søgebar 50px 47px 20px 96px 96px Højden er variabel i forhold til mængden af indhold. 30px 20px 30px 30px 286px 776px 10px 30px Footer Designmaunal / version 6 / / 56

57 Startdato Arial, Regular, 12px, # Højrestillet 96px det hvide felts højre side. Placeret 20px under det hvide felts top. Holdtitel Arial, Regular, 14px, #00457e Venstrestillet i forhold til venstremargin. Placeret 20px under det hvide felts top. Kviknummer Arial, Regular, 11px, # Venstrestillet 10px fra holdtitlen, med hvilken den er på linie. varighed Arial, Regular, 12px, # Højrestillet i forhold til højremargin og placeret 20px under det hvide felts top. kursus-ikon Ikonet er vertikalt centreret i forhold til holdtitlen. Ikonet er placeret 10px. fra det hvide felts venstre side. navn på uddannelsesstedet og Adressen på undervisningsstedet. Arial, Regular, 10px, # Placeret 5px. under holdtitlen. Venstrestillet i forhold til venstremargin. Landkort-ikon Venstrestillet 10px fra adressen og horisontalt centreret i forhold til den. stiblede linie Længde: 705px. Tykkelse: 1px. Farve: #2B2F35.Den stiblede linie er placeret 15px under navnet på uddannelsesstedet og adressen på undervisningsstedet. total pris 1 Arial, Bold, 10px, #2B2F35. Prisen er højrestillet i forhold til højremargin, og placeret 10px under den stiblede linie. Afstanden til bunden af det hvide felt er 15px. Designmaunal / version 6 / / 57

58 2. Kursistens sider Designmaunal / version 6 / / 58

59 Flow for kursisten: 2.0 Kursist Tilmelding Private, selvstændige og ledige: Step X-Y 2.3 Kursist VEU-ansøgning Private og selvstændige: STEP X-Y Her præsentreres design-principperne for de to flows. Designmaunal / version 6 / / 59

60 Grid Header Søgebar Bemærk at søgebaren ikke eksisterer i tilmeldings- og VEU-ansøgningsflows. Højden er variabe i forhold til mængden af indhold. 50px Venstremenu 47px 30px 184px 184px 184px 184px info info info info 95px 286px info info info info info info Højremenu Train - steps Se en nærmere beskrivelse af train-funktionen under Generelle visuelle retningslinier. Bemærk at train-funktionen ikke fremkommer på følgende skærmbilleder: 2.0 Kursist - Private - Tilmelding - 0a-0c (tilmeldingsforside) 2.0 Kursist - Selvstændig - Tilmelding - 0 (tilmeldingsforside) 2.0 Kursist - Ledig - Tilmelding - 0 (tilmeldingsforside) KNAP LINK LINK 2px 30px 30px 30px 776px 30px 10px 30px Footer Designmaunal / version 6 / / 60

61 Typografi Overskrifter sort overskrift i lyseblåt felt Arial, Regular, 18px, #2B2F35. Venstrestillet og placeret 20px fra det blå felts top samt 20px fra venstre side af det blå felt. Hvid overskrift i mørkeblåt felt Arial, Bold 14px, #ffffff. Vertikalt centreret i det blå felt. Venstrestillet 30px fra det blå felts venstre side. Denne overskrift aligner med alt indhold i det hvide felt. Dynamisk tal Arial, Bold, 20px, #fffff. Venstrestillet 10px. fra venstre side af det mørkeblå felt. Vertikalt centreret i feltet. sort overskrift i hvidt felt Arial, Regular, 18px, #2B2F35. Venstrestillet i forhold til venstremargin. Placeret under topmarginen eller 30px under den stiblede linie. Brødtekst, radio buttons eller andre elementer er altid placeret 20px under denne teksttype. Hjælpetekst Hjælpeteksten er placeret i sidste kolonne. Teksten aligner horisontalt med den mørkeblå boks (dvs. 50px til toppen af det lyseblåt felt. Kolonnebredden er 184px med en højre- og venstremargin på 10px. Teksten er venstrestillet og har følgende styles: Overskrift, brødtekst og (dyb-) links. Afstanden mellem to afsnit er 27px. overskrift Arial, Bold, 11/17px., #2b2f35 brødtekst Arial, Regular, 11/17px., #2b2f35 (dyb-)link Arial, regular, 11px., #00457E, understregning ved mouseover. Linket kan være placeret i brødteksten eller være placeret 7px under sidste linie i teksten. Designmaunal / version 6 / / 61

62 Brødtekst / Radio button-, tjekboks-, dropdown- og inputfelttekst. Arial, Regular, 12/17px, #2B2F35. Brødteksten forholder sig til det hvide felts største indholdsfelt (se gennemgangen af det overordnede grid - rødt felt). Spaltebredden er 286px.Teksten er venstrestillet og er altid placeret 20px under et vilkårligt element. Brødteksten forholder sig til den angivne venstremargin og afstanden mellem to afsnit er 20px. 20px Som tekst til radio buttons og tjekbokse følges den eksisterende venstremargin ikke - teksten er da placeret 5px til højre for elementerne (venstrestillet 48px fra venstre side af det hvide felt) og den første tekstlinie vil være horisontalt centreret i forhold til elementerne. Som overordnet tekst til et dropdownfelt eller et inputfelt følges den angivne venstremargin. Teksten er venstrestillet og placeret 5px over elementet. Grå tekst Arial, Regular, 11/14px, # En grå teksten vil kun forekomme i forbindelse med en mørkegrå tekstlinie. Den grå tekst er venstrestillet og vil altid aligne vertikalt med den mørkegrå tekstlinie - som den er placeret 7px under. Designmaunal / version 6 / / 62

63 Information om kursisten, faktureringsadresse m.m. / 4 spaltet grid Denne teksttype forholder sig til et firespaltet system (se gennemgangen af det overordnede grid - blå felter). Teksten er venstrestillet og placeret 20px under en overskrift eller en given topmargin. overskrift Arial, Bold, 12/18px, #2B2F35. brødtekst Arial, Regular, 12/18px, #2B2F35. Kursusinformation - se beskrivelsen under punkt 1.8 Kurv afstand mellem to afsnit 20px Link Arial, regular, 12px., #00457E Understregning ved mouseover. Placeret 7px under sidste linie i en tekst. Links i tekst Ved forekomst af links i en tekstblok (ex. brødtekst) ændres tekstfarven på linket (#00457E). Ved mouseover tilføres en understregning. Designmaunal / version 6 / / 63

64 Diverse elementer Stiblet linie De stiblede linier der adskiller forskellig typer af information har en længde på 705px. Tykkelsen er 1px. og farve er #2B2F35.Over og under den stiblede linie er der en afstand på 30px til ny information. Denne standard afstand afviger de steder hvor der vises kurser og kursusinformation. Se de alternative afstande i punkt 1.8 Kurv. Afstandene er relevant for følgende skærmbilleder: Privat_tilmelding_2a, Privat_tilmelding_2b, Privat_tilmelding_5, Privat_tilmelding_6, Selvstændig_tilmelding_2, Selvstændig_tilmelding_5, Selvstændig_tilmelding_6, Privat_VEU_ansøgning_2 & Ledig_tilmelding_1. Radio button Radio buttons er et standard windows komponent. Radiusen er 13px. og har en grå streg med farven #2B2F35. De følger den angivne venstremargin og den tilhørende tekst er horisontalt centreret i forhold til dem. Afstanden mellem to radio buttons er 20px. Hvis den tilhørende tekst er på flere linier placeres den næste radio button 20px under sidste tekstlinie. Tjekboks Tjekboksene er standard windows komponenter. Bredden er 13 og højden er13px og har en grå streg med farven #2B2F35. De følger den angivne venstremargin og den tilhørende tekst er horisontalt centreret i forhold til dem. Afstanden mellem to radio buttons er 20px. Hvis den tilhørende tekst er på flere linier placeres den næste radio button 20px under sidste tekstlinie. Hjælpeikon Ikonet her viser ved mouseover en pop-up. Ikonet er altid placeret 5px til højre for en given tekst og er altid horisontalt centreret i forhold til teksten. Pop-up: tekst og dimensioner Højden på dette element er variabel alt efter mængden af information. Elementets marginer er 10px i bunden og i toppen samt 10px til højre og til venstre. Pilen er centreret. Teksten er venstrestillet og forholder sig til de given marginer. Tekst: Arial, Regular, 11/16px, #2B2F35. Designmaunal / version 6 / / 64

65 Print følgebrev Knappen Print følgebrev er et standard windows komponent. Bredden er 97px og højden er 20px. Knappen er venstrestillet og aligner vertikalt med teksten ovenover som den er knyttet til - placeret 10px herunder. Print-ikon / Print-tekst Teksten er horisontalt centreret i forhold til ikonet og placeret 5px fra ikonets højre side. Print-ikonet og teksten, betragtet som en enhed, følger top- og højremarginen. Print er skrevet med Arial, Regular, 10px, #2B2F35. Designmaunal / version 6 / / 65

66 Knapper/links i bunden af det hvide felt De orange knapper er altid højrestillet i forhold til højremargin. Knappen(-erne) er placeret 30px under den stiblede linie og 30px over det hvide felts bund. Afstanden mellem to knapper er 10px. Tilbage -/ Fortryd -links er venstrestillet i forhold til venstremargin og er horisontalt centreret i forhold til de orange knapper. Læs om styling af knapperne under afsnittet Generelle visuelle retningslinier. Knapper/links i kvitteringer I kvitteringerne sidder den orange knap og linket anderledes end ellers. Linket er placeret 20px under den orange knap og begge er højrestillet i forhold til højremargin. De to forholder sig ligeledes til bundmarginen på 30px. Designmaunal / version 6 / / 66

67 Input felter Inputfelterne er et standard windows komponent. Bredden er 162px og højden er 26px. Feltet har en grå streg på 1px i farven #2B2F35. Feltet er placeret 10px under det element det forholder sig til. Inputteksten: Arial, Regular, 11px, #2B2F35. Vertikalt og horisontal centreret i input feltet. Højre-, venstremargin: 5px. 26px 55px 12px 4px Vælg dato Overskriften er stylet som brødteksten og placeret 10px over input feltet. Dropdown Dropdown elementerne er en standard windows komponent. Bredden er 162px og højden er 26px. Feltet har en grå streg på 1px i farven #2B2F35. Feltet er placeret 10px under det element det forholder sig til. Inputteksten: Arial, Regular, 11px, #2B2F35. Vertikalt og horisontalt centreret i dropdown feltet. Højre-, venstremargin: 5px. Inputtekst Arial, Regular, 11px, #2B2F35. Vertikalt og horisontal centreret i input feltet. Højre-, venstremarginen er 5px. Kalender-ikonet er horisontalt centreret i forhold til indtastningsfeltet og placeret 4px. til højre for input feltet. Se afsnittet Generelle visuelle retningslinier for styling af kalender der forekommer ved mouseover på kalenderikonet. Designmaunal / version 6 / / 67

68 OBS OBS-ikon og meddelelse OBS-ikonet og meddelelse placerer sig altid ovenover det som det refererer til. Ikonet er venstrestillet i forhold til venstremargin og tekstmeddelelsen er placeret 5px til højre for ikonet. Ikon og tekst er horisontalt centreret i forhold til hinanden. Afstanden fra ikonet til elementer nedenunder og ovenover er 20px. Tekstmeddelsen: Arial, Regular, 12px, #DA482B. Designmaunal / version 6 / / 68

69 Dimmed baggrund Det hvide felt Boksen er centreret i browservinduet med dimmed baggrund. Bredde: 698px Højde: 467px Luk vinduet Arial, Regular, 11px, # Venstrestillet 30px fra det hvide felts venstre side og placeret 20px under det hvide felts top. kryds-ikonet Ikonet er horisontalt centreret i forhold til teksten. Placeret 5px derfra. Print / print-ikon Teksten er horisontalt centreret i forhold til ikonet og placeret 5px fra ikonets højre side. Print-ikonet og teksten, betragtet som en enhed, er højrestillet 30px fra det hvide felts højre side og placeret 20px under feltets top. 58px Overskrift Arial, Regular, 18px, #2B2F35. Venstrestillet 30px fra det hvide felts venstre side og placeret 30px under den stiblede linie. 156px 150px underoverskrift Arial, Bold, 11px, #2B2F35. Venstrestillet 30px fra det hvide felts venstre side, placeret 20px under overskriften. tekst Arial, Regular, 11px, #2B2F35. Venstrestillet 30px fra det hvide felts venstre side, placeret 5px under underoverskriften. 257px Stiblede linier Længde: 659px. Tykkelsen: 1px. Farve: #2B2F35. vertikalt centreret i det hvide felt. dato Arial, Bold, 12px, #2B2F35. Venstrestillet 30px fra det hvide felts venstre side, placeret 30px under den stiblede linie brødtekst Arial, Regular, 12/14px, #2B2F35. Venstrestillet 30px fra det hvide felts venstre side, placeret 20px under datoen. Spaltebredden er 523px og afstanden mellem to afsnit er 19px. orangeknap Højrestillet 30px fra det hvide felts højre side og placeret 30px over det hvide felts bund. Designmaunal / version 6 / / 69

70 2.1 Kursist Kursusoversigt Dele af dette layout er nærmere beskrevet i kapitel 3. Virksomheden - se de specifikke referancer. Se introduktionsafsnittene i kapitel 3. Virksomhed. Se afsnittet 3.1 Virksomhed - Kursusoversigt kommende Designmaunal / version 6 / / 70

71 Arial, Regular, 12px, #2B2F35. Venstrestillet 15px fra det lysegrå felts venstre side og placeret 20px under dets top. 60px 960px navn Arial, Regular, 18px, #00457e, vertikalt centreret i det lysegrå felt og venstrestillet 17px fra venstre side af det lysegrå felt. CPR-nr Arial, Regular, 13px, #2B2F35, venstrestillet 5px fra venstre side af navnet Startdato / Veu ansøgning/ dokukenter Arial, Bold, 11px, #FFFFFF. Vertikalt centreret i det grå felt. Startdato : venstrestillet 647px fra venstre side af det grå felt. VEU ansøgning : venstrestillet 746px fra venstre side af det grå felt. Dokumenter : venstrestillet 874px fra venstre side af det grå felt. ikke udfyldt Arial, Regular, 11px, #da482b. Vertikalt centreret i forhold til den hvide titel i det grå felt. Vertikalt centreret i det hvide felt. Tekst Arial, Regular, 13px, #2B2F35, vertikalt centreret i det mørkegrå felt og venstrestillet 17px fra venstre side af det mørkegrå felt. Dato Arial, Regular, 12px, # Vertikalt centreret i forhold til den hvide titel i det grå felt. Vertikalt centreret i det hvide felt. afsendt elektronisk / printet Arial, Regular, 11/13px, #5DB242. Vertikalt centreret i forhold til den hvide titel i det grå felt. Vertikalt centreret i det hvide felt. tak / Dokumentikon Arial, Regular, 12px, #2b2F35. Ikonet er placeret 5px fra tallet og de to er horisontalt centreret i forhold til hinanden. Ikonet og tallet, som en enhed, er vertikalt centreret i forhold til den hvide titel i det grå felt og vertikalt centreret i det hvide felt. Designmaunal / version 6 / / 71

72 2.2 Kursist Kursusbeskrivelse med dokumentoversigt Dele af dette layout er nærmere beskrevet i kapitel 3. Virksomheden - se de specifikke referancer. Se introduktionsafsnittene i kapitel 3. Virksomhed og afsnittet 2.1. Kursist - Kursusoversigt. Se afsnittet Virksomhed - Kursusbeskrivelse med kursister og dokumentoversigt. Se afsnittet 1.6 Kursusbeskrivelse for at se de tekniske detaljer. Designmaunal / version 6 / / 72

73 link Arial, Bold, 13px, #00457E. Pilen er placeret 5px til venstre for linket. Venstrestillet 10px fra venstre side af det hvide felt og placeret 20px under det hvide felts top. 102px 766px brødtekst Arial, Regular, 12/18px, #2B2f35. Teksten er placeret 20px under linket og venstrestillet 10px fra venstre side af det hvide felt. Spaltebredden er 368px. orangeknap Højrestillet 10px fra det hvide felts højre side og placere 10px over feltets bund Designmaunal / version 6 / / 73

74 3. Virksomhedens sider Designmaunal / version 6 / / 74

75 Flow for virksomheden: 3.0 Virksomhed - Tilmelding: Step 0-3 Dette flow er designmæssigt baseret på design-principperne beskrevet i følgende afsnit i kapitel 2. Kursist: 2.0 Kursist Tilmelding Private, selvstændige og ledige: Step X-Y 2.3 Kursist VEU-ansøgning Private og selvstændige: STEP X-Y. Designmaunal / version 6 / / 75

76 Virksomhedssiden Min side for virksomheder og private adskiller sig fra resten af portalen med hensyn til farver og grid. Søgebaren er her default foldet ind således at brugeren ikke forstyrres. Sammenfoldet søgebar Menu Den karakteristiske blå farve er skifte ud med grå nuancer og indholdsfeltet har fået en ekstra menu integreret. Farver Mellem grå 1 #b1b1b1 Mellem grå 2 # Hvid #FFFFFF Lys grå 2 #dddddd Lys grå 3 #cccccc Designmaunal / version 6 / / 76

77 Grid Header Marginerne omkring menuen er 2px i toppen, til højre og til venstre. Afstanden mellem indholdsdelen og menuen er 12px. Venstre menu Søgebar Menu Menu Højre menu 47px 960px Afstanden titellinien og indholdsfeltet er 2px. Indholdsfeltet er layouted forskellige alt after skærmbillede. Layoutet vil blive gennemgået. Højde er variabel i forhold til mængden af indhold. Højde er variabel i forhold til mængden af indhold. Bundmarginen er 20px. Højre-/venstremargin er 10px. Footer Designmaunal / version 6 / / 77

78 Menu 975px 45px 45px 90px pil Pilen er vertikalt centreret i forhold til menupunktet. Pilen angiver hvor brugeren er. Virksomhedens navn Arial, Regular, 18px, #00457e, vertikalt centreret i det lysegrå felt og venstrestillet 17px fra venstre side af det lysegrå felt. indstillinger Arial, Regular, 10px, #00457e, vertikalt centreret i det lysegrå felt og venstrestillet 20px fra virksomhedens login navn. menutekst Arial, Regular, 13px, #2B2F35, vertikalt centreret i det mørkegrå felt. Første menutekst er venstrestillet 17px fra venstre side af det mørkegrå felt. Den indbyrdes afstand mellem menupunkterne er 35px. Blåt felt Højde: 16px. Bredde: 18px Runde hjørner, #00457e, vertikalt centreret i det mørkegrå felt og placeret 10px fra menupunkt Dynamisk tal Arial, Bold, 11px, #fffffff, centreret i det blå felt. Designmaunal / version 6 / / 78

79 Virksomhed Kursusoversigt kommende/afholdte Header Venstre menu Højre menu Søgebar 61px 960px 2px 61px Højde er variabel i forhold til mængden af kurser. Footer Designmaunal / version 6 / / 79

80 Kursustitel Arial, Bold, 14px, #FFFFFF Vertikalt centreret i det grå felt og venstrestillet 10px fra venstre side af det grå felt. Pilen er centreret i forhold til kursustitlen og placeret 5px under kursustitlen. Startdato / Antal tilmeldte / navngivning / arbejdsgivererklæring Arial, Bold, 11px, #FFFFFF. Vertikalt centreret i det grå felt. Startdato : venstrestillet 517px fra venstre side af det grå felt. Antal tilmeldte : venstrestillet 613px fra venstre side af det grå felt. Navngivning : venstrestillet 726px fra venstre side af det grå felt. Arbejdsgivererklæring : venstrestillet 823px fra venstre side af det grå felt. Blå Kursustitel Arial, Bold 14px, #00457e Venstrestillet 30px fra venstre side af det hvide felt. Placeret 18px under det hvide felts top. Kviknummer Arial, Regular, 14px, # Venstrestillet 5px fra kursustitlen, med hvilken den er på linie. Tal Arial, Regular, 12px, # Vertikalt centreret i forhold til den hvide titel i det grå felt. Vertikalt centreret i det hvide felt. ikke udfyldt Arial, Regular, 11px, #da482b. Vertikalt centreret i forhold til den hvide titel i det grå felt. Vertikalt centreret i det hvide felt. kursus-ikon Ikonet er horisontalt centreret i forhold til kursustitlen. Ikonet er placeret 10px. fra det hvide felts venstre side. navn på uddannelsesstedet og Adressen på undervisningsstedet. Arial, Regular, 10px, # Placeret 5px. under kursustitlen. Venstrestillet 30px fra venstre side af det grå felt. mørkegrå Kursustitel Arial, Bold 14px, #2B2F35 Venstrestillet 30px fra venstre side af det grå felt. Placeret 18px under det grå felts top. kort-ikon Venstrestillet 5px fra adressen og horisontalt centreret i forhold til den. udfyldt / afsendt elektronisk Arial, Regular, 11px, #5DB242. Vertikalt centreret i forhold til den hvide titel i det grå felt. Vertikalt centreret i det hvide felt. Designmaunal / version 6 / / 80

81 3.1.1 Virksomhed Kursusbeskrivelse med kursister og dokumentoversigt Header Venstre menu Højre menu Søgebar 159px 191px 2px Højde er variabel i forhold til antallet af kursister 192px Højde er variabel i forhold til mængden af information 2px Højde er variabel i forhold til antallet af kurser. Se de tekniske detaljer for denne del af designet i afsnittet 1.6 Kursusbeskrivelse. 766px Footer Designmaunal / version 6 / / 81

82 Hvid overskrift Arial, Bold 14px, #ffffff. Vertikalt centreret i det grå felt. Venstrestillet 10px fra det grå felts venstre side. sort overskrift Arial, Regular, 18px, #2B2F35. Venstrestillet 10px fra det hvide felts venstre side. Placeret 20px under det hvide felts top. Radio button - afstand Afstanden fra radio button til det hvide felts venstre side er 268px. Se de andre beskrivelser for mere information. Link Arial, Regular, 11px, #00457E. Pilen er venstrestillet 5px fra linket. brødtekst Arial, Regular, 12px, #2B2F35. Venstrestillet 10px fra det hvide felts venstre side. Placeret 10px under overskriften Radio button 1 + tekst Radio buttons er et standard windows komponent. Radius: 13px. Grå kant på 1px i farven #2B2F35. Første radio button er placeret 10px fra det hvide felts venstre side og 20px under brødteksten. Teksten er sat med arial, bold, 11px, #2B2F35. Teksten er horisontalt centreret i forhold til radio button og venstrestillet 5px derfra. Radio button 2 + tekst Anden radio button er placeret 17px fra det hvide felts venstre side og 10px under den første radio button. Teksten er sat med arial, regular, 11px, #2B2F35. Teksten er horisontalt centreret i forhold til radio button og venstrestillet 5px derfra. Input felter Inputfelterne er et standard windows komponent. Bredden er 127px og højden er 19px. Feltet har en grå streg på 1px i farven #2B2F35. Feltet er placeret 5px til højre for teksten, som den er horisontalt centreret i forhold til. Inputteksten: Arial, Regular, 11px, #2B2F35. Vertikalt og horisontal centreret i input feltet. Højre-, venstremargin: 5px. orangekanp Højrestillet 10px fra det hvide felts højre side og placeret 20px over bunden af det hvide felt. Designmaunal / version 6 / / 82

83 overskrift Arial, Regular, 18px, #2b2f35, vertikalt centreret i det hvide felt og venstrestillet 10px fra venstre side af det hvide felt. Stiblet linie #2B2F35 Længde: 745px Tykkelse: 1px 50px 36px 60px kontaktoplysninger / Arbejdsgivererklæring / veu-skema Arial, Bold, 11px, #2b2f35, vertikalt centreret i det hvide felt. Kontaktoplysninger: Venstrestillet 267px fra venstre side af det hvide felt. Arbejdsgivererklæring: Venstrestillet 510px fra venstre side af det hvide felt. VEU-skema: Venstrestillet 696px fra venstre side af det hvide felt. hjælpe-ikon Vertikalt centreret i forhold til teksten. Venstrestillet 5px fra tekst. Mailadresse Arial, Regular, 11px, #888888, vertikalt centreret i det hvide felt og venstrealignet i forhold til overskrift ovenover. hjælpe-ikon Vertikalt centreret i forhold til teksten. Højrestillet 5px fra tekst. udfyldt Arial, Regular, 11px, #5db242, vertikalt centreret i det hvide felt og vertikalt centreret i forhold til overskriften. afsendt elektronisk Arial, Regular, 11px, #5db242, vertikalt centreret i det hvide felt og højrestillet 10px fra højre side. cpr-nr Arial, Regular, 11px, #888888, vertikalt centreret i det hvide felt og venstrestillet 5px fra navn/ unavngivet. Navn / unavngivet Arial, Regular, 11px, #2b2f35 (navngivet) #00457E (unavngivet), vertikalt centreret i det hvide felt og venstrestillet 10px fra tallet. tal Arial, Regular, 12px, #2b2f35, vertikalt centreret i det hvide felt og venstrestillet 10px fra venstre side af hvide felt. ikke udfyldt Arial, Regular, 11px, #da482b, vertikalt centreret i det hvide felt. Det første ikke udfyldt (til venstre) er venstrealignet med overskrift. Det andet ikke udfyldt (i midten) er vertikalt centreret i forhold til overskrift. Det sidste ikke udfyldt (til højre) er højrestillet 10px fra højre side af det hvide felt. orange knap Højrestillet 10px fra det hvide felts højre side. Placeret 15px under den stiblede linie og 20px over det hvide felts bund. Designmaunal / version 6 / / 83

84 overskrift Arial, Regular, 18px, #2b2f35, venstrestillet 10px fra venstre side og 20px fra det hvide felts top. 50px 29px Stiblet linie #2B2F35. Længde: 192px. Tykkelse: 1px. Placeret 10px under og over teksten. grå linie #2B2F35. Længde: 192px. Tykkelse: 1px. Placeret 17px under overskriften og 10 over en blå tekst. dokument-ikon Vertikalt centreret mellem to stiblede linier og placeret 10px fra højre side af det hvide felt. tekst (links) Arial, Bold, 11px, #2b2f35, venstrestillet 10px fra det hvide felts venstre side og vertikalt centreret mellem to stiblede linier. Designmaunal / version 6 / / 84

85 3.1.2 Virksomhed Indtastning/overblik Header Venstre menu Højre menu Søgebar 960px Toppen er 112px 336px 186px 186px 172px 80px Feltet for en unavngivet kursist er 29px Feltet for en navngivet kursist er 90px Højde er variabel i forhold til mængden af kurser Bunden med den orange knap er 70px Footer Designmaunal / version 6 / / 85

86 vejledende tekst (link) Arial, Bold, 13px, #00457e. Venstrestillet 10px fra det hvide felts venstre side og placeret 10px over den grå linie. overskrift Arial, Regular, 18px, #2b2f35, venstrestillet 10px fra venstre side af det hvide felt og placeret 20px under det hvide felts top. Kursustitel & dato Arial, Bold 14px, #ffffff. Vertikalt centreret i det grå felt. Venstrestillet 10px fra det grå felts venstre side. Datoen er venstrestillet 30px fra kursustitlen. kolonnetekster (alle) Arial, Regular, 10/12px, #2b2f35. Placeret 20px fra det hvide felts top. Højre- og venstremargin er 5px. tal Arial, Bold, 12px, #2b2f35, vertikalt centreret mellem to stiblede linier og venstrestillet 10px fra det hvide felts venstre side. hjælpe-ikon Placeret 5px under teksten og venstrealignet i forhold til teksten. unavngivet Arial, Bold, 12px, #00457e, vertikalt centreret mellem to stiblede linier og venstrestillet 10px fra tallet. radio buttons (alle) Standard windows komponent. Radius: 13px. Placeret 10px under den horisontale stiblede linie og 10px til højre for den vertikalt stiblede linie. Når der er to radio buttons i samme kolonne er deres indbyrdes afstand 67px. navn Arial, Bold, 12px, #2b2f35, venstrestillet 10px fra tal og placeret 10px under den stiblede linie. cpr-nr Arial, Bold, 12px, #00457E. adresse & mobilnummer Arial, Regular, 11px, #2b2f35, venstrealignet med navnet og placeret 8px under navnet. arbejdsadresse Arial, Bold(overskrift)/ Regular(adressen), 10px, #888888, venstrealignet med navnet og placeret 10px under adressen. faktureringsadresse Arial, Bold(overskrift)/ Regular(adressen), 10px, #888888, venstrealignet med navnet og placeret 10px under arbejdsadressen. tekst til tjekbokse, radio buttons & flueben (alle) Arial, Regular, 10/12px, #2b2f35. Vertikalt centreret i forhold til tjekboksen/ radio button eller fluebenet. Venstrestillet 5px fra elementes højre side. tjekbokse (alle) Standard windows komponent. Bredde & højde: 13px. Placeret 10px under den horisontale stiblede linie og 10px til højre for den vertikale stiblede linie. flueben Placeret 13px under den horisontale stiblede linie og 10px til højre for den vertikalt stiblede linie. Designmaunal / version 6 / / 86

87 Grå linie Bredde: 940px / Tykkelse: 1px. # Centreret i det hvide felt. horisontalt Stiblede linier Bredde: 940px / Tykkelse: 1px. # Centreret i det hvide felt. Vertikale Stiblede linier Højde: 426px / Tykkelse: 1px. # Placeret 20px fra det hvide felts top og rammer den nederste stiblede linie. orange knap Højrestillet 10px fra det hvide felts højre side og placeret 10px under den sidste stiblede linie og 20px over det hvide felts bund. Designmaunal / version 6 / / 87

88 Stiblede linier Bredde: 437px / Tykkelse: 1px. #2B2F35. Centreret i boksen. overskrift Arial, Regular, 18px, #2b2f35. Venstrestillet 20px fra venstre side og placeret 20px under det hvide felts top. 50px 45px 80px 80px 40px 477px 306px pil Pilen placere sig ud fra det felt med en unavngivet person, som skal udfyldes. grå inputfelter - dimensioner & tekst Lille inputfelt: bredden er 103 og højde er 25px. Store inputfelt: bredden er 323 og højden er 25px Gråstreg: 1px, #2B2F35 Grå baggrund: #DDDDDD Tekst for CPR-inputfeltet: Arial, Regular, 14px, #2b2f35, vertikalt centreret, højre- og venstremargin er 5px. Tekst for inputfelter: Arial, Regular, 11px, #2b2f35, vertikalt centreret, højre- og venstremargin er 5px. Luk vinduet Arial, Regular, 10px, #2b2f35. Højrestillet 5px fra kryds-ikonet og 20px under boksens top. Luk-ikon (krydset) Placeret 20px fra boksens højre side og centreret med teksten Luk vindue, placeret 5px derfra. cpr Arial, Bold, 14px, #2b2f35, venstrestillet 20px fra venstre side og centreret mellem to stiblede linier. navn Arial, Regular, 11px, #2b2f35, horisontalt centreret i forhold til inputboksen og placeret 10px derfra. emneoverskrifter Arial, Regular, 11px, #2b2f35, venstrestillet 20px fra venstre side. Den første overskrift er placeret 20px under den stiblede linie og den anden overskrift er placeret 18px over den nederste stiblede linie. hjælpe-ikon Horisontalt centreret i forhold til emneoverskriften og placeret 5px derfra. note Arial, Regular, 11px, # Placeret 10px under den stiblede linioer og venstrestillet 20px. fra venstre side af det hvide felt. orangeknap Placeret 5px under den stiblede linie, placeret 20px fra højre side af det hvide felt og 10px over bunden. dropdown Bredde:323 / Højde:25px Gråstreg: 1px, #2B2F35 Grå baggrund: #DDDDDD Tekst: Arial, Regular, 11px, #2b2f35, vertikalt centreret, højre- og venstremargin er 5px. Designmaunal / version 6 / / 88

89 3.1.3 Virksomhed Masseindtastning link Arial, Regular, 10px, #00457E. Venstrestillet 5px fra højre side af den vejledende tekst. Pilen er placeret 5px fra højre side af linket. hjælpe-ikon Horisontalt centreret i forhold til overskrfiten og placeret 10px fra overskriften. Overskrift Arial, Regular, 18px, #2B2F35. Venstrestillet 20px fra det hvide felts venstre side og 30px under det hvide felts top Vejledende tekst Arial, Regular, 10px, # Venstrestillet 20px fra det hvide felts venstre side, placeret 5px under overskriften og 10px over fritekstfeltet. Luk vinduet Arial, Regular, 11px, # Højrestillet 5px fra kryds-ikonet og 20px under det hvide felts top. kryds-ikonet Placeret 20px fra boksens højre side og centreret med teksten Luk vinduet. Det hvide felt Boksen er centreret i browservinduet og den er modalt med dimmed baggrund. Bredde: 860px Højde: 478px overskrift - inputfelt Arial, Regular, 11px, #2b2f35, horisontalt centreret i forhold til inputfelterne og venstrestillet 20px fra ventre side af det hvide felt. grå inputfelter Bredde: 323px. Højde: 26px. Gråstreg: 1px, #2B2F35. Grå baggrund: #DDDDDD. Afstanden mellem de to inputfelter er 10px. Felterne er venstrestillet 135px fra venstre side af det hvide felt. Første inputfelt er placeret 20px under fritekstfeltet. Tekst i inputfelt: Arial, Regular, 11px, #2b2f35, vertikalt centreret, højre- og venstremargin er 5px. Fritekstfelts dimensioner Bredde: 820px / Højde: 290px Blå kant på 1px og i farven #ABD2EB. Vertikalt centreret i det hvide felt og placeret 72px under det hvide felts top. orange knap Højrestillet 20px fra det hvide felts højre side og placeret 20px over det hvide felts bund. Designmaunal / version 6 / / 89

90 pop-up Bredde: 320px. Højde: Variabel. Blåramme: bredde - 290px / højde: variabel. Rammen er vertikalt centreret i pop-uppen og placeret 15px under pop-uppens top. Den blå rammes højre- og venstremargin: 10px. Den blå rammes top- og bundmargin: 10px pilen Pilen er placeret ud fra linket, som aktiverer pop-uppen. tekst Arial, Regular, 11/24pt, #888888, venstrestillet. Designmaunal / version 6 / / 90

91 3.1.4 Virksomhed Signering af arbejdsgivererklæring Se beskrivelsen af layoutet i afsnittet Virksomhed - Indtastning/overblik. Kvitteringstekst Arial, Regular, 18/20px, #2b2f35, venstrestillet 10px fra venstre side af det hvide felt og placeret 55px under det hvide felts top. flueben Fluebenet er venstrestillet i forhold til 2. kolonne og vertikalt centreret mellem de stiblede linier. Designmaunal / version 6 / / 91

92 3.3 Virksomhed Kursistoversigt Header Venstre menu Højre menu Søgebar 960px Toppen: 72px 30px 656px 244px 30px Højden er variabel i forhold til antallet af kurser Tekstfelt: 29px Bund: 30px Højde er variabel i forhold til mængden af kursister. Kursist: Sammenfoldet 74px 30px Footer Designmaunal / version 6 / / 92

93 søg Bredde: 199px. Højde: 26px. Gråstreg: 1px, #2B2F35. Grå baggrund: #DDDDDD. Højrestillet 10px fra højre side af menufeltet og vertikalt centreret i det mørkegrå felt i menufeltet. Lup-ikonet er vertikalt centreret og højrestillet 5px fra højre side af søgefeltet. Tekst i søgefeltet: Arial, Regular, 11px, #2b2f35, vertikalt centreret, højremargin er 5px og venstremargin er 5px fra luppen. Designmaunal / version 6 / / 93

94 pil - foldet ud Pilen angiver at feltet er foldet ud. Den er venstrestillet 10px fra det hvide felts venstre side og placeret 20px under det hvide felts top. Navn Arial, Regular, 14px, #2B2F35. Venstrestillet i forhold til venstremargin og placeret 18px under det hvide felts top. adresse Arial, Regular, 11px, #00457E. Venstrestillet i forhold til venstremargin og placeret 12px under navnet. mobilnummer eller tekst Arial, Regular, 11px, #2B2F35. Venstrestillet 5px fra adressen. cpr-nummer Arial, Regular, 14px, # Venstrestillet 10px fra højre side af navnet. grå linie Bredde: 899px / Tykkelse: 1px. #2B2F35. Centreret i det hvide felt. dato-overskrift Arial, Bold, 11px, #2B2F35. Venstrestillet i forhold til anden kolonne (se præsentationen af gridet for denne side). Vertikalt centreret mellem den grå linie og den stiblede linie. dato Arial, Regular, 11px, #2B2F35. Venstrestillet i forhold til anden kolonne (se præsentationen af gridet for denne side). Vertikalt centreret mellem to stiblede linier. Arbejdsgivererklæring-overskrift Arial, Bold, 11px, #2B2F35. Højrestillet i forhold til højremargin. Vertikalt centreret mellem den grå linierog den stiblede linie. udfyldt Arial, Regular, 11px, #5DB242. Højrestillet i forhold til højremargin. Vertikalt centreret mellem to stiblede linier. Kommende kurser / afholdte kurser Arial, Bold, 12px, #2b2f35, venstrestillet i forhold til venstremargin. Vertikalt centreret mellem den grå linie og den stiblede linie. ikke udfyldt Arial, Regular, 11px, #DA482B. Højrestillet i forhold til højremargin. Vertikalt centreret mellem to stiblede linier. holdtitel Arial, Regular, 11px, #00457E, venstrestillet i forhold til venstremargin. Vertikalt centreret mellem to stiblede linie. pil - foldet ind Pilen angiver at feltet er foldet ind. Her er den venstrestillet 13px fra det hvide felts venstre side og placeret 18px under det hvide felts top. kviknummer Arial, Regular, 11px, #888888, venstrestillet 3px til højre for holdtitlen. Vertikalt centreret mellem to stiblede linie. Stiblede linier Bredde: 899px / Tykkelse: 1px. #2B2F35. Centreret i det hvide felt. Designmaunal / version 6 / / 94

95 3.4 Virksomhed Indstilllinger Header Venstre menu Højre menu Søgebar Toppen: 160px 388px Bund: 227px 960px 20px Footer Designmaunal / version 6 / / 95

96 Virksomhed - adresse Arial, Regular, 14/20px, #2b2f35, venstrestillet 10px fra venstre side af det hvide felt. Placeret 5px under virksomhedens navn. Virksomhed - navn Arial, Bold, 14px, #2b2f35, venstrestillet 10px fra venstre side af det hvide felt. Placeret 20px under det hvide felts top. inputfelt Standard windows komponent. Højde: 26px. Bredde: 184px. Grå kant på 1px #2B2F35. Horisontalt centreret i forhold til EAN nr og placeret 10px derfra. Stiblet linie Bredde: 939px / Tykkelse: 1px. #2B2F35. Centreret i det hvide felt og placeret 160px under det hvide felts top. Vejledende tekst Arial, Regular, 11px, #888888, venstrestillet 10px fra venstre side af det hvide felt. Placeret 10px under virksomhedens adresse. ean nr. Arial, Regular, 11px, #2b2f35, venstrestillet 10px fra venstre side af det hvide felt. Placeret 20px under den vejledende tekst. Læs de tekniske detaljer for denne del af designet under afsnittet Virksomhed - kursusbeskrivelse med kursister og dokumentoversigt. orange knap Højrestillet 10px fra det hvide felts højre side og placeret 20px over det hvide felts bund. Designmaunal / version 6 / / 96

97 4. VEU administrationens sider for a-kasse og skoler Designmaunal / version 6 / / 97

98 4.0 VEU admin Ulæste ansøgninger Header Venstre menu Højre menu Søgebar Lysegråt felt: 103px 20px 1 215px 2 215px 3 500px 10px Toppen: 40px 20px 90px 90px 215px 190px 95px 80px 110px 50px 20px Højden på det hvide felt er variabel i forhold til antallet af kursister 30px Bunden: 40px 960px Footer 10px Designmaunal / version 6 / / 98

99 Menu Læs om de tekniske detaljer i kapitel 3. Virksomhed, under afsnittet Menu. Hvid overskrift Arial, Bold 14px, #ffffff. Vertikalt centreret i det grå felt. Venstrestillet 10px fra det grå felts venstre side. Designmaunal / version 6 / / 99

100 inputfelter Standard windows komponent. Højde: 26px. Bredde: 143px. Grå kant: 1px / #2B2F35. Feltet er horisontalt centreret i forhold til overskriften og placeret 70px fra venstre side af det lysegrå felt. inputfelter Standard windows komponent. Højde: 26px. Bredde: 143px. Grå kant: 1px / #2B2F35. Feltet er horisontalt centreret i forhold til overskriften og placeret 291px fra venstre side af det lysegrå felt. inputfelt Standard windows komponent. Højde: 26px. Bredde: 143px. Grå kant: 1px / #2B2F35. Feltet er horisontalt centreret i forhold til overskriften og placeret 530px fra venstre side af det lysegrå felt. Tjekboks - tekst Arial, Bold, 10px, #2b2f35, venstrestillet i forhold til fjerde kolonne. Tjekboks Standard windows komponent. Højde og bredde: 13px. Grå kant: 1px / #2B2F35. Tjekboksen er horisontalt centreret i forhold til overskriften og placeret 5px fra teksten. baggrundsfarve #f5f5f5 orangeknap Knappen er højrestillet 10px fra højreside af det lysegrå felt og placeret 10px over feltets bund. Overskrift Arial, Bold, 10px, #2b2f35, venstrestillet i forhold til de tre kolonner. Første overskrift er placeret 25px under det grå felts top. Anden overskrift er placeret 20px under den første overskrift. inputfelt / kalender-ikon Inputfeltet er et standard windows komponent. Højde: 26px. Bredde: 55px. Grå kant: 1px / #2B2F35. Feltet er horisontalt centreret i forhold til overskriften og placeret 5px derfra. Ikonet er horisontalt centreret i forhold til inputfeltet og placeret 5px derfra. startdato Arial, Bold, 10px, #2b2f35. Venstrestillet 597px fra venstre side af det lysegrå felt og alignet horisontalt med de nederste overskrifter. Designmaunal / version 6 / /100

101 Overskrifter Arial, Bold, 11px, #2b2f35, venstrestillet i forhold til de 8 kolonner. Overskrifterne er vertikalt centreret mellem det hvide felts top og den grå streg. pil Pilen er vertikalt centreret i forhold til overskriften og placeret 4px under overskriften. navn (link) Arial, Bold, 11px, #00457E, venstrestillet i forhold til første kolonne. Navnet er vertikalt centreret mellem to linier. grå linie Længde: 940px. Tykkelse: 1px / #2B2F35. Stegen er centreret i det hvide felt og placeret 40px fra toppen af det hvide felt. stiblede linier Længde: 940px. Tykkelse: 1px / #2B2F35. Afstanden mellem to stiblede linier er 30px. De stiblede linier er centreret i det hvide felt. CPR-nummer (link) Arial, Bold, 11px, #00457E, venstrestillet i forhold til anden kolonne. CPR-nummeret er vertikalt centreret mellem to stiblede linier. holdbetegnelse Arial, Regular, 11px, #2B2F35, venstrestillet i forhold til tredje kolonne. Holdbetegnelsen er vertikalt centreret mellem to stiblede linier. kviknummer Arial, Regular, 11px, #888888, venstrestillet 3px fra holdbetegnelsen. Kviknummeret er vertikalt centreret mellem to stiblede linier. Uddannelsessted - navn Arial, Regular, 11px, #2B2F35, venstrestillet i forhold til fjerde kolonne. Uddannelsesstedets navn er vertikalt centreret mellem to stiblede linier. startdato / slutdato / ansøgningsdato / afdeling Arial, Regular, 11px, #2B2F35, vertikalt centreret i forhold til overskriften samt vertikalt centreret mellem to stiblede linier. Designmaunal / version 6 / /101

102 4.0.1 VEU admin Vis ansøgning med tilstedeværelse Header Venstre menu Højre menu Søgebar Toppen: 40px 20px px 20px Højden er variabel px 119px 5 Højden er variabel 6 190px px 30px Højden er variabel Højden er variabel px Bunden: 40px 960px 10px Footer Designmaunal / version 6 / /102

103 Holdtitel Arial, Bold, 11px, #2B2F35, venstrestillet i forhold til venstremargin og placeret 20px over den grå linie. link Arial, Bold, 13px, #00457E, venstrestillet i forhold til venstremargin. Pilen er placeret 5px til venstre for teksten. Linket er placeret 30px under det hvide felts top. Uddannelsesstedet - navn Arial, Bold, 13px, #2B2F35, venstrestillet i forhold til anden kolonne placeret 20px over den grå linie. Print / print-ikon Teksten er horisontalt centreret i forhold til ikonet og placeret 5px fra ikonets højre side. Print-ikonet og teksten, betragtet som en enhed, er højrestillet 20px fra det hvide felts højre side og placeret 30px under feltets top. kviknummer Arial, Regular, 11px, #888888, placeret 3px fra venstre side af holdtitlen. overskrift Arial, Bold, 11px, #2B2F35, venstrestillet i forhold til venstremargin og placeret 20px under den grå linie. dato Arial, Regular, 11/14px, #2B2F35, venstrestillet i forhold til venstremargin. Første linie starter 20px under overskriften. timer / ikke registreret Arial, Regular, 11/14px, #2B2F35( timer ) / #DA482B ( ikke registreret ), venstrestillet i forhold til fjerde kolonne. Første linie starter 20px under overskrifte. grå linie Længde: 940px. Tykkelse: 1px / #2B2F35. Linien er centreret i det hvide felt. link Arial, Bold, 13px, #00457E, højrestillet i forhold til højremargin. Pilen er placeret 5px til højre for teksten. Linket er placeret 20px over det hvide felts bund. link Arial, Bold, 13px, #00457E, venstrestillet i forhold til femte kolonne. Pilen er placeret 5px til højre for teksten. Linket er placeret 20px over den stiblede linie. stiblede linier Længde: 940px. Tykkelse: 1px / #2B2F35. Linierne er centreret i det hvide felt og placeret 20px under den sidste tekstlinie. orange knapper Afstanden mellem de to knapper er 10px. Knappen til højre er højrestillet 20px fra det hvide felts højre side. Knapperne er placeret 30px over det hvide felts bund. link Arial, Bold, 13px, #00457E, højrestillet i forhold til højremargin. Pilen er placeret 5px til højre for teksten. Linket er placeret 30px over det hvide felts bund. Designmaunal / version 6 / /103

104 fag Arial, Bold, 11/14px, #2B2F35, venstrestillet i forhold til venstremargin / sjette og syvende kolonne. Placeret 20px under den stiblede linie. tekst til fag Arial, Regular, 11/14px, #2B2F35, venstrestillet i forhold til venstremargin / sjette, syvende og ottende kolonne. Første linie starter 20px under overskrifte. Afstanden mellem to afsnit er 20px. tekst ( spørgsmål ) Arial, Regular, 11/14px, #2B2F35, venstrestillet i forhold til venstremargin / sjette, syvende og ottende kolonne. Første linie starter 20px under den stiblede linie. tekst ( svar ) Arial, Regular, 11/14px, #2B2F35, venstrestillet i forhold til venstremargin / sjette, syvende og ottende kolonne. Første linie starter 94px under den stiblede linie. overskrift Arial, Bold, 11/14px, #2B2F35, venstrestillet i forhold til venstremargin. Første overskrift er placeret 20px under den stiblede linie. brødtekst Arial, Regular, 11/14px, #2B2F35, venstrestillet i forhold til venstremargin. afstand mellem to afsnit 15px Designmaunal / version 6 / /104

105 4.1 VEU admin Læste ansøgninger Se de tekniske detaljer for dette skærmbillede under afsnittet 4.0 VEU admin - Ulæste ansøgninger. Designmaunal / version 6 / /105

106 4.2 VEU admin Vis kursist tilstedeværelse Header Venstre menu Højre menu Søgebar Gråt felt: 73px 20px 20px px 252px 260px 98px 81px 110px 44px 960px 10px Footer Designmaunal / version 6 / /106

107 inputfelter Standard windows komponent. Højde: 26px. Bredde: 143px. Grå kant: 1px / #2B2F35. Inputfeltet er horisontalt centreret i det lysegrå felt og placeret 30px til højre for overskriften. inputfelt / kalender-ikon Inputfeltet er et standard windows komponent. Højde: 26px. Bredde: 55px. Grå kant: 1px / #2B2F35. Feltet er horisontalt centreret i forhold til overskriften og placeret 5px derfra. Ikonet er horisontalt centreret i forhold til inputfeltet og placeret 5px derfra. Overskrift Arial, Bold, 10px, #2b2f35. Teksten er horisontalt centreret i det lysegrå felt. orangeknap Knappen er højrestillet 10px fra højreside af det lysegrå felt og placeret 20px over feltets bund. Første overskrift er venstrestillet i forhold til venstre margin. 2. overskrift er venstrestillet 20px fra det første inputfelt. Designmaunal / version 6 / /107

108 navn / cpr-nummer (link) Arial, Bold, 13px, #00457E, venstrestillet i forhold til venstremargin. Navn og CPR-nummer er placeret 30px under et hvide felts top. Afstanden mellem navn og CPR-nummer er 15px. Overskrifter Arial, Bold, 11px, #2b2f35, venstrestillet i forhold til kolonne. Overskrifterne er placeret 30px under det hvide felts top. pil Pilen er vertikalt centreret i forhold til overskriften og placeret 4px under overskriften. holdtitel Arial, Bold, 11px, #2B2F35, venstrestillet i forhold til venstremargin og placeret 20px under den stiblede linie. kviknummer Arial, Regular, 11px, #888888, venstrestillet 3px fra holdtitlen og placeret 20px under den stiblede linie. stiblede linier Længde: 940px. Tykkelse: 1px / #2B2F35. Linier er centreret i det hvide felt og placeret 20px under den sidste tekstlinie. tilstedeværelse Arial, Bold, 11px, #2B2F35, venstrestillet i forhold til venstremargin og placeret 10px under holdtitlen. dato Arial, Regular, 11/14px, #2B2F35, venstrestillet i forhold til venstremargin. Første linie starter 20px under Tilstedeværelse. timer Arial, Regular, 11/14px, #888888, venstrestillet i forhold til anden kolonne. Første linie starter 20px under Tilstedeværelse. Uddannelsessted - navn Arial, Regular, 11px, #2B2F35, venstrestillet i forhold til tredje kolonne og placeret 20px under den stiblede linie. startdato / slutdato / ansøgningsdato / afdeling Arial, Regular, 11px, #2B2F35, vertikalt centreret i forhold til overskriften og placeret 20px under den stiblede linie. Designmaunal / version 6 / /108

109 5. Skolens sider til udsendelse af brev Designmaunal / version 6 / /109

110 5.0 Skole Holdoversigt med søgning Header Venstre menu Højre menu Søgebar Gråt felt: 99px Toppen af det hvide felt: 40px 10px px Afstanden mellem to stiblede linier: 40px 556px 107px 87px 125px 65px Bunden: 30px 960px 10px Footer Designmaunal / version 6 / / 110

111 Menu Læs om de tekniske detaljer i kapitel 3. Virksomhed, under afsnittet Menu. Hvid overskrift Arial, Bold 14px, #ffffff. Vertikalt centreret i det grå felt. Venstrestillet 10px fra det grå felts venstre side. Overskrift Arial, Bold, 10px, #2b2f35. De øverste overskrifter er placeret 28px under det grå felts top og de nederste overskrifter er placeret 28px over det grå felts bund. kalender-ikon / inputfelt Inputfeltet er et standard windows komponent. Højde: 26px. Bredde: 55px. Grå kant: 1px / #2B2F35. Feltet er horisontalt centreret i forhold til overskriften og placeret 5px derfra. Ikonet er horisontalt centreret i forhold til inputfeltet og placeret 5px derfra. Overskrifterne til venstre er venstrestillet 20px fra venstre side af det grå felt. De to næste overskrifter (startdato + undervisningssted) er venstrestillet 306px fra venstre side af det grå felt, hvor sidste overskrift (startdato) er placeret 20px til højre for kalender-ikonet. inputfelter Standard windows komponent. Højde: 26px. Bredde: 143px. Grå kant: 1px / #2B2F35. Feltet er horisontalt centreret i forhold til overskriften og placeret 103px fra venstre side af det grå felt. inputfelt Standard windows komponent. Højde: 26px. Bredde: 143px. Grå kant: 1px / #2B2F35. Feltet er horisontalt centreret i forhold til overskriften og placeret 10px fra overskriften. orangeknap Knappen er højrestillet 10px fra højreside af det grå felt og placeret 10px over feltets bund. Designmaunal / version 6 / / 111

112 Kviknummer Arial, Regular, 14px, # Venstrestillet 5px fra kursustitlen, med hvilken den er på linie. pil Pilen er vertikalt centreret i forhold til overskriften og placeret 4px under overskriften. Blå Kursustitel Arial, Bold 14px, #00457e Venstrestillet 30px fra venstre side af det hvide felt. Placeret 7px under den stiblede linie. Overskrifter Arial, Bold, 11/13px, #2b2f35. De første to overskrifter er venstrestillet i forhold til 2. og 3. kolonne, og placeret 15px under det hvide felts top. I 4. og 5. kolonne. er det længste ord af de to ord venstrestillet i forhold til kolonnerne mens de indbyrdes er centreret. kursus-ikon Ikonet er horisontalt centreret i forhold til kursustitlen. Ikonet er placeret 10px. fra det hvide felts venstre side. undervisningsstedets adresse Arial, Regular, 10px, # Placeret 5px. under kursustitlen. Venstrestillet 30px fra venstre side af det hvide felt. startdato / slutdato / udsendte indkaldelsesbreve / seneste udsendelse Arial, Regular, 11px, #2B2F35, vertikalt centreret i forhold til overskriften og vertikalt centreret mellem to stiblede linier. Designmaunal / version 6 / / 112

113 5.1 Skole Oversigt over breve til hold Header Venstre menu Højre menu Søgebar Gråt felt: 135px Toppen af det hvide felt: 45px 20px px Afstanden mellem to stiblede linier: 30px 470px 193px 110px 100px 47px Bunden: 96px 960px 10px Footer Designmaunal / version 6 / / 113

114 link Arial, Bold, 13px, #00457E, venstrestillet i forhold til venstremargin. Pilen er placeret 5px til venstre for teksten. Linket er placeret 20px under det grå felts top. Overskrifter Arial, Bold, 11/13px, #2b2f35. De tre første overskrifter er venstrestillet i forhold til kolonne og placeret 30px under det grå felts top. Den sidste overskrift er centreret i 4. kolonne og placeret 20px under det grå felts top. pil Pilen er vertikalt centreret i forhold til overskriften og placeret 4px under overskriften. grå linie Længde: 940px. Tykkelse: 1px / #2B2F35. Linien er centreret i det grå felt og placeret 54px under feltets top. Overskrifter Arial, Bold, 11/13px, #2b2f35. Venstrestillet i forhold til venstre margin og vertikalt centreret mellem den grå linie og den stiblede linie. Tekst Arial, Regular, 11px, #2B2F35, vertikalt centreret i forhold til overskriften og vertikalt centreret mellem den stiblede linie og den grå linie. link Arial, Bold, 13px, #00457E, højrestillet 20px til venstre for den orange knap. Horisontalt centreret i forhold til den orange kanp. Pilen er placeret 5px til højre for teksten. orangeknap Knappen er højrestillet 10px fra højreside af det grå felt og placeret 10px over feltets bund. stiblet linie Længde: 940px. Tykkelse: 1px / #2B2F35. Linien er centreret i det grå felt og placeret 50px over det grå felts bund. Designmaunal / version 6 / / 114

115 pil Pilen er vertikalt centreret i forhold til overskriften og placeret 4px under overskriften. sort tekst Arial, Regular, 9px, #2B2F35. Venstrestillet 10px fra højreside af tjekboksen og horisontalt centreret i forhold til tjekboksen. Overskrifter Arial, Bold, 11/13px, #2b2f35. De tre første overskrifter er venstrestillet i forhold til kolonne og placeret 20px under det hvide felts top. Den sidste overskrift er centreret i 5. kolonne og placeret 13px under det hvide felts top. Tjekbokse Standard windows komponent. Højde og bredde: 13px. Grå kant: 1px / #2B2F35. Første tjekboks er placeret 20px under det hvide felts top hvor de andre tjekbokse er vertikalt centreret mellem de to linier. Tjekboksene er venstrestillet i forhold til venstremargin. grå linie Længde: 940px. Tykkelse: 1px / #2B2F35. Linien er centreret i det hvide felt og placeret 45px under feltets top. stiblede linier Længde: 940px. Tykkelse: 1px / #2B2F35. Linierne er centreret i det hvide felt og afstanden mellem to linier er 30px. orangeknapper Afstanden mellem knapperne er 10px. Første knap til højre er højrestillet 10px fra højreside af det hvide felt og placeret 10px under den sidste stiblede linie. Slet / slet-ikon Arial, Bold 11px, #00457e. Ikonet er venstrestillet i forhold til venstremargin. Teksten er venstrestillet 4px til højre for slet-ikonet. De to holder bund og er placeret 20px under den sidste stiblede linie. Blå overskrift (link) Arial, Bold 12px, #00457e. Venstrestillet 10px fra højreside af tjekboksen og vertikalt centreret mellem de to linier. Tekst Arial, Regular, 11px, #2B2F35, vertikalt centreret i forhold til overskriften og vertikalt centreret mellem de stiblede linier. link Arial, Bold, 13px, #00457E, højrestillet 10px fra højre side af det hvide felt og placeret 20px under den orange knap. Pilen er placeret 5px til højre for teksten. Designmaunal / version 6 / / 115

116 5.1.1 Skole Tilføj dokument/skabelon fra arkiv Se de tekniske detaljer for feltet i afsnittet Skole - Opret . Højden er 468px og bredden er 790px. Fritekstfeltets højde og bredde følger marginerne beskrevet i det ovennævnte afsnit. Indholdet her bliver hentet fra skærmbillede 5.2 Skole - Skabelon- og dokumentoversigt. Se afsnittet for de tekniske detaljer. Designmaunal / version 6 / / 116

117 5.1.2 Skole Generér udsendelse Overskrift Arial, Regular, 18px, ##2B2F35. Venstrestillet 20px fra det hvide felts venstre side og 30px under det hvide felts top. Vejledende tekst Arial, Regular, 10px, # Venstrestillet 20px fra det hvide felts venstre side, placeret 5px under overskriften. Tekst Arial, Regular, 11px, #2B2F35, venstrestillet og vertikalt centreret mellem to linier. Luk vinduet Arial, Regular, 11px, # Højrestillet 5px fra kryds-ikonet og 20px under det hvide felts top. kryds-ikonet Placeret 20px fra boksens højre side og centreret med teksten Luk vinduet. Underoverskrifter Arial, Bold, 12px, #2b2f35. Venstrestillet 20px fra venstre side af det hvide felt og vertikalt centreret mellem to linier. Tekst Arial, Regular, 12/16px, #2B2F35, venstrestillet i forhold til venstremargin. Første tekstlinie er placeret 30px under den stiblede linie. 20px 206px 428px 203px grå linie Længde: 839px. Tykkelse: 1px / #2B2F35. Stegen er centreret i det hvide felt og placeret 82px under det hvide felts top. stiblede linier Længde: 839px. Tykkelse: 1px / #2B2F35. Linierne er centreret i det hvide felt og afstanden mellem to linier er 29px Det hvide felt Boksen er centreret i browservinduet med dimmed baggrund. Bredde: 862px Højde: 425px Tjekbokse Standard windows komponent. Højde og bredde: 13px. Grå kant: 1px / #2B2F35. Tjekboksen er horisontalt centreret i forhold til teksten som den relaterer sig til og placeret 206px fra venstre side af det hvide felt. inputfelter Standard windows komponent. Højde: 26px. Bredde: 173px. Grå kant: 1px / #2B2F35. Inputfeltet er horisontalt centreret i forhold til teksten som den relaterer sig til og placeret 206px fra venstre side af det hvide felt. inputfelt / kalender-ikon Inputfeltet er et standard windows komponent. Højde: 26px. Bredde: 55px. Grå kant: 1px / #2B2F35. Feltet er horisontalt centreret i forhold til teksten som den relaterer sig til og placeret 206px fra venstre side af det hvide felt. Ikonet er horisontalt centreret i forhold til inputfeltet og placeret 5px derfra. orange knapper Afstanden mellem de to knapper er 10px. Knappen til højre er højrestillet 10px fra det hvide felts højre side og placeret 30px over det hvide felts bund. Designmaunal / version 6 / / 117

118 5.1.3 Skole Generer VEU - ansøgning Skole Udsendelse - kvittering Luk vinduet Arial, Regular, 11px, # Højrestillet 5px fra kryds-ikonet og 20px under det hvide felts top. kryds-ikonet Placeret 10px fra boksens højre side og centreret med teksten Luk vinduet. Overskrift Arial, Regular, 18px, ##2B2F35. Venstrestillet 20px fra det hvide felts venstre side og 30px under det hvide felts top. Grå linie Længde: 540px. Tykkelse: 1px / #2B2F35. Linien er centreret i det hvide felt og placeret 67px under det hvide felts top. Det hvide felt Boksen er centreret i browservinduet med dimmed baggrund. Bredde: 862px Højde: 425px Tekst Arial, Regular, 12/16px, #2B2F35, Venstrestillet 20px fra det hvide felts venstre side. Første tekstlinie er placeret 20px under den grå linie.afstanden mellem to afsnit er 20px. Designmaunal / version 6 / / 118