DESIGNGUIDE WEBSITE DESKTOP OG MOBIL 06
FARVER HOVEDFARVER SEKUNDÆRE FARVER Primary blue Secondary blue Primary teal Primary orange 80% 60% 40% 0% 80% 60% 40% 0% 80% 60% 40% 0% 80% 60% 40% 0% Hex: ##033f65 Hex: #35a8e0 Hex: #a8edc Hex: #f6896 R: 3 G: 63 B: 0 R: 53 G: 68 B: 4 R: 68 G: 5 B: 0 R: 46 G: 37 B: 38 Identitetsbærende farve der anvendes til topnavigation og footerelement Identitetsbærende farve der anvendes til venstrenavigation, links og labels Supplerende farve der anvendes til tags og forside-temabokse Anvendes til forsidens temaboks Light grey Dark grey 80% 60% 40% 0% 80% 60% 40% 0% Hex: #F4F4F4 Hex: #505050 R: 44 G: 44 B: 44 R: 80 G: 80 B: 80 Anvendes til tynde streger, større baggrundsflader, faktabokse, tabeller og besøgte links Anvendes til fede streger, pile, ikoner, servicemenu og datoer
TEMA BOKS 3 Temabokse er særlige felter, der kan aktiveres på forsiden af lmst.dk ifb. med emner, vi sætter fokus på og som ikke er en del af det normale redaktionelle flow i nyhedsfeltet. På temabokse kan følgende farver anvendes: mintgrøn #A8EDD og orange #F6896, se side.
TYPOGRAFI 4 Lmst.dk anvender typografien Source Sans Pro, som er en gratis Google font. Source Sans Pro er en velegnet typografi til læsning på skærm på alle typer af enheder. Typohrafien kan også anvendes offline. Source Sans Pro kan downloades på: www.google.com/fonts Source Sans Pro Light Source Sans Regular Source Sans Italic Source Sans Pro Bold A B C D E F G H I J A B C D E F G H I J A B C D E F G H I J A B C D E F G H I J K L M N O P Q R S T K L M N O P Q R S T K L M N O P Q R S T K L M N O P Q R S T U V W X Y Z Æ Ø Å U V W X Y Z Æ Ø Å U V W X Y Z Æ Ø Å U V W X Y Z Æ Ø Å a b c d e f g h i j a b c d e f g h i j a b c d e f g h i j a b c d e f g h i j k l m n o p q r s k l m n o p q r s k l m n o p q r s k l m n o p q r s t u v w y z æ ø å t u v w y z æ ø å t u v w y z æ ø å t u v w y z æ ø å 34567890 34567890 34567890 34567890
TYPOGRAFI FORSIDE 5 Følgende specificerer typografi for desktop-visning af lmst.dk. Da typografi til hhv. tablet og mobile enheder skalerer sig i % ift. skærmstørrelse og opløsning, med udgangspunkt i nedenstående specificeres typografi til hhv. tablet og mobile enheder ikke. 3 Overskrift H Source Sans Pro Light, 3px, #000000 Mellemoverskrift Source Sans Pro Bold, 9px, #000000 Supplerende indgang Source Sans Pro Regular, 6px, #000000 4 4 Label Source Sans Pro Regular, versaler, 6px, #FFFFFF 3
TYPOGRAFI INDHOLD 6 Følgende specificerer typografi for desktop-visning af lmst.dk. Da typografi til hhv. tablet og mobile enheder skalerer sig i % ift. skærmstørrelse og opløsning, med udgangspunkt i nedenstående specificeres typografi til hhv. tablet og mobile enheder ikke. Overskrift (H) Source Sans Pro Light, 3px, #000000 Manchet Source Sans Pro Bold, 6px, #000000 3 Mellemoverskrift (H) Source Sans Pro Bold, 9px, #000000 4 Tekstlink Source Sans Pro Light, 6px, #00A8E3 6 5 6 Brødtekst Source Sans Pro Regular, 6px, #000000 Faktabox-Overskrift Source Sans Pro Regular, 0px, #000000 3 4 5 8 7 7 Faktabox-Brødtekst Source Sans Pro Regular, 4px, #000000 8 Faktabox-Tekstlink Source Sans Pro Regular, 4px #00A8E3
TYPOGRAFI TABELLER 7 Følgende specificerer typografi for desktop-visning af lmst.dk. Da typografi til hhv. tablet og mobile enheder skalerer sig i % ift. skærmstørrelse og opløsning, med udgangspunkt i nedenstående specificeres typografi til hhv. tablet og mobile enheder ikke. Tabel overskrift Source Sans Pro Bold, 3px, #000000 Tabel liste Source Sans Pro Regular, 3px, #000000
BILLED FORMATER 8 FORSIDE-BILLEDE TEMA-BILLEDE INDHOLDS-BILLEDE HØJREBOKS-BILLEDE Foto: Jens Astrup, Scanpix Desktop: Bredde: 450px Højde: Variabel Desktop: Bredde: 350px Højde: 0px Desktop: Bredde: 450px Højde: Variabel Desktop: Bredde: 87px Højde: Variabel Tablet/mobil: Bredde: skaleres procentvis ift. desktop Højde: skaleres procentvis ift. desktop Tablet/mobil: Bredde: skaleres procentvis ift. desktop Højde: skaleres procentvis ift. desktop Tablet/mobil: Bredde: skaleres procentvis ift. desktop Højde: skaleres procentvis ift. desktop Tablet/mobil: Bredde: skaleres procentvis ift. desktop Højde: skaleres procentvis ift. desktop
IKONER & TAGS 9 SUPPLERENDE INDGANGE Ikoner benyttes på forsiden til supplerende indgange. Ikoner skal være lines og ikke fyldte. Ikonstørrelse er 5x5 px, og der anvendes SVG format. Nye ikoner bør følge samme grafiske stil. SERVICENAVIGATION Ikoner skal være lines og ikke fyldte. Ikonstørrelse er 34x48 px, og der anvendes SVG format. Nye ikoner bør følge samme grafiske stil. TAGS Tags består af fyldt bundfarve Primary Teal #a8edc Kampagner Vaccination Børnemedicin Del Share Email AAA
GRID FORSIDE 0 00% 454px 454px 930px 930px Content 454px Content 454px 00% Content 454px Content 454px px Indholdsside mobil Forside desktop Forside mobil
GRID INDHOLDSIDE 454px 454px 930px 00% 930px 690px 8px px px Venstre-nav. 8px Content 450px Højre-spalte 8px Content / faktabokse / temaboxe 00% Indholdsside desktop Indholdsside mobil
NAVIGATION DESKTOP. niveau (topnavigation) Første niveau navigation udgøres af en horisontal topbjælke med 6 menupunkter 3 Navigationsprincippet gør det muligt at folde hver punkt ud på første niveau ud som en drop down menu. Ved ufoldet navigation kan punkter i andet niveau tilgåes. 4 Sektionssiden kan også aktivt vælges nederst i drop down menuen. Navigation desktop Forsættes næste side > 3 4 Udfoldet navigation desktop
NAVIGATION DESKTOP 3-4. niveau (venstrenavigation) Der følges et navigationsprincip for venstrenavigationen som tillader to interaktioner pr. menupunkt: Klikkes der på et emne tekst så åbnes den pågældende side. Klikkes der på pilen, så åbnes eller lukkes det aktuelle menupunkt Navigation desktop Udfoldet venstrenavigation desktop
NAVIGATION MOBIL 4 Mobilnavigation Der følges et navigationsprincip for mobilnavigationen som tillader to interaktioner pr. menupunkt: Passiv navigation Burgerikonet åbner navigationen Klikkes der på et emne tekst så åbnes den pågældende side. 3 Klikkes der på pilen, så åbnes eller lukkes det aktuelle menupunkt. 3 Udfoldet. niveau navigation Udfoldet navigation -3 niveau
DESIGN MOBIL 5
DESIGN DESKTOP 6 Forside Indholdsside
7 Lægemiddelstyrelsen I Designguide I Maj 06