DESIGNGUIDE WEBSITE DESKTOP OG MOBIL 2016

Transkript

1 DESIGNGUIDE WEBSITE DESKTOP OG MOBIL 06

2 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: # 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

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

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

5 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, # Mellemoverskrift Source Sans Pro Bold, 9px, # Supplerende indgang Source Sans Pro Regular, 6px, # Label Source Sans Pro Regular, versaler, 6px, #FFFFFF 3

6 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, # Manchet Source Sans Pro Bold, 6px, # Mellemoverskrift (H) Source Sans Pro Bold, 9px, # Tekstlink Source Sans Pro Light, 6px, #00A8E Brødtekst Source Sans Pro Regular, 6px, # Faktabox-Overskrift Source Sans Pro Regular, 0px, # Faktabox-Brødtekst Source Sans Pro Regular, 4px, # Faktabox-Tekstlink Source Sans Pro Regular, 4px #00A8E3

7 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, # Tabel liste Source Sans Pro Regular, 3px, #000000

8 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

9 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 AAA

10 GRID FORSIDE 0 00% 454px 454px 930px 930px Content 454px Content 454px 00% Content 454px Content 454px px Indholdsside mobil Forside desktop Forside mobil

11 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

12 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

13 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

14 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

15 DESIGN MOBIL 5

16 DESIGN DESKTOP 6 Forside Indholdsside

17 7 Lægemiddelstyrelsen I Designguide I Maj 06