Designmanual BUTLER FM

Transkript

1 Designmanual BUTLER FM 2015 Grontmij A/S, Facilities Management Forfatter: Rikke Carlsen, RIC

2 Indhold Grid... 3 Afstande... 5 Fonte og typografier... 6 Farver... 7 Tabeller... 8 Andre elementer Ikoner Co-branding - kundens Butler Side 2 af 13

3 Grid Designet er opdelt i et vertikalt 12-divisions system. Det betyder, at alle kolonner skal følge et grid, hvor kolonnernes bredde svarer til skærmbilledets bredde divideret med 12, 6, 4, 3, 2 eller 1 (minus indrykning). I enkelte tilfælde kan skærmbilledet deles med 5 men kun, hvis billedet består af netop 5 kolonner! 12 kolonner (8,3333 % width) 4 kolonner (25 % width) 2 kolonner (50 % width) 6 kolonner (16,6667 % width) 3 kolonner (33,3333 % width) 5 kolonner (20 % width) Side 3 af 13

4 Grid Dos & don ts Kolonnernes bredde må gerne mixes, så længe de holder sig inden for 12-divisionssytemet. DO Kombinér gerne forskellige kolonnebredder på samme side. Her: 1 x 50% og 2 x 25 %. DON T Kolonnerne behøver ikke være delelige med hinanden. Her: 2 x 25 % og 3 x 16,6667 %. Lad gerne to kolonner flyde sammen til en bredere kolonne. Her: 3 ens kolonner, hvor de to første er blevet til én. Bland ikke andre kolonnebredder ind i systemet. Her er 2 kolonner af 20 % blandet ind i billedet. Side 4 af 13

5 Afstande GENERELT: 10px When in doubt, brug altid 10px som default. Marginer Top: 7px (fx fra logo til top), 2px fra topnav til top Sider: 10px Bund (footer): 25px (fra nederste indholdselement til bund) (footerindhold er ikke indholdselement) Afstand mellem elementer Horisontalt: 10px (fx 5px padding på begge elementer) eller som minimum deleligt med 5 Eks. 10px fra boks-kant til tekst Vertikalt: 10px eller som minimum deleligt med 5 7px 10px Her må tekst, billeder og andet indhold være. 10px 10px 25px 10px 10px 10px 10px 10px Side 5 af 13

6 Fonte og typografier Vi bruger tekst på fire overordnede niveauer i Butler: Overskrifter Mellemrubrikker Brødtekst / tabeller Knapper / links Og som udgangspunkt benyttes 2 skrifttyper til det hele: MYRIAD PRO CONDENSED AaBbCcDdEeFfGgHhIiJjKkLl MmNnOoPpQqRrSsTtUuVv XxYyZzÆæØøÅå ,.;:-_! # %&/()= Menupunkter Links Knapper Andre lignende overordnede elementer Vi benytter typen Myriad Pro Semibold Condensed. Semibold fås ved følgende css-koder: font-family: Myriad Pro Condensed, Arial, sans-serif; font-weight: 500; Myriad Pro Condensed bør mindst have en font-size på 12px. MYRIAD PRO AaBbCcDdEeFfGgHhIiJj KkLlMmNnOoPpQqRrSs TtUuVvXxYyZzÆæØøÅå ,.;:-_! # %&/()= Brødtekst Underrubrikker og mellemrubrikker fx i tabellers topbar Vi benytter typen Myriad Pro Regular. Vejledende font-sizes Underrubrikker/mellemrubrikker: font-size: 15px font-weight: 500 Brødtekst: font-size: 12px Typografier i praksis Menupunkt (20px) Topmenu / Funktionsmenu (16px) Brødkrumme (12px) Underrubrik (i topbar) (15px) Brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst (12px) Tekst på knap (16px) Footer (10px) Side 6 af 13

7 Farver Primære farver (Grontmij CVI) Bruges primært i hovednavigationen. Rød 00 PMS 1795 coated #d12421 RGB: CMYK: Primære farver (Blåt hierarki) Disse er de mest brugte farver i Butler. Bruges bl.a. til tabeller og bjælker. (Se tabeller) Blå 00 PMS 282 coated #00214d RGB: CMYK: Grønne funktioner Grøn 00 bruges til knapper/funktioner som laver ændringer på siden eller som åbner en pop-up. Grøn 01 bruges til statusfremhævning eller anden fremhævning i tabeller og til inaktive knapper. Grøn 00 #49a842 RGB: CMYK: Blå 00 PMS 282 coated #00214d RGB: CMYK: Blå 01 # RGB: CMYK: Grøn 01 #a3d3a0 RGB: CMYK: Blå 02 PMS 300 coated #006ec7 RGB: CMYK: Blå 03 #7fb6e3 RGB: CMYK: Gule fremhævninger Bruges til at vise, når noget på en side er valgt eller foldet ud. Gul 00 PMS 130 coated #d12421 RGB: CMYK: Blå 04 #bfdbf1 RGB: CMYK: Gul 01 #f2d788 RGB: CMYK: Side 7 af 13

8 Tabeller Størrelser Top-bar (mørkeste bjælke) højde: 35 px Alle andre overordnede bjælker: 31 px Rækker højde: 28 px 1 px luft/border mellem bjælker, samt mellem bjælker og rækker. Alle bokse har 1px border Farver Bjælker Bjælker er delt i hierarki vha. farver. Des mørkere bjælke, des vigtigere funktion. Derfor er øverste bjælke i top (og evt. nederste opsummerende bjælke i bund) ofte mørkest. Rækkefølge: Blå 00 bruges i navigationen til funktionsbåndet, som er øverst i bjælke-hierarkiet, og derfor ikke benyttes nogen som helst andre steder. Rækker Rækker er stribede for at hjælpe brugervenligheden. Hvid: #ffffff, RGB: , CMYK: Grå: #dae2e8, RGB: , CMYK: Border-color: #a6b2c1, RGB: , CMYK: Blå 01 er øverste niveau på undersiden, fx i tabeller. Blå 02 underinddeler typisk den tabel, som blå 01 er rubrikholder for. Bruges også ofte som opsummerende i bunden af en tabel. Blå 03 Blå 04 benyttes kun sjældent. Side 8 af 13

9 Tabeller Eksempel Farver Blå 01 Blå px 31 px Højder Blå px Blå 02 Blå px 31 px Side 9 af 13

10 Andre elementer Knapper Knapper som ændrer informationer eller opsætning i Butler: Tekst er grundelement. Farver: Grøn 00 som standard og Grøn 01 til inaktive knapper. Tekst skal være hvid, samt centreret på knappen. Højde: 25px Bredden kan variere, men er som minimum default: 70px. Brug så vidt muligt denne størrelser og ellers fuld bredde (kolonnebredde) med 10px padding til siderne. Hover: #72bf6d, RGB: , CMYK: Hjørner har en border-radius på 2px. Standardknapper, som ikke ændrer i information: Ikoner er grundelement (se Ikoner ) Farver: blå farver fra hierarkiet. Standard Blå 01, men ellers benyttes baggrundsfarven og en hvid border. Ikoner skal være hvide, samt centreret på knappen. Højde & bredde: 25px. Hover: cursor= pointer. Hjørner har en border-radius på 2px. Tekstfelter / selectbarer Højde 25 px. Eksempler Eksempler Eksempler Opret ny Kopier Sæt ind Standard Hover Inaktiv Side 10 af 13

11 Ikoner Der er til Butlers identitet udviklet en række ikoner, som skal hjælpe brugervenligheden. Derudover er der en række ikoner, som understøtter funktionerne i administrationspanelet. Disse understøttes af tekst. Der er en række standard-ikoner til knapper med funktioner, såsom pile, søg og udskriv. Disse benyttes på blå knapper uden tekst. Herunder findes også fire ikoner til fanerne på bygningsdelskortet, som benyttes på hvide cirkler. Ejendomsadministration Firma administration Fag- og prisindeks Postnumre Tablet abc Alfabetisk rækkefølge d/m Datobestemt rækkefølge Sorter / filtrer Klassifikation 1 Bruger administration Vedligeholdstyper Enheder Tilbage til start / spring til næste... Venstre / tilbage Højre / frem Op / ændre visningsrækkefølge Ned / ændre visningsrækkefølge Frem til sidste / spring til næste... Klassifikation 2 Brugergrupperettigheder Vigtighed Kontaktinformation Tilføj Slet Roter P Gå til primært billede Søg / se større visning Udskriv Tilstande Udskift firma Ejendomskontaktperson Rekvisitionsnumre Indsæt dags Indsæt næste dd dato i måneden... Browse / åbn kalender Vedligehold Dokumenter Billeder Komponenter Side 11 af 13

12 Co-branding - kundens Butler Logo For at give kunden større ejerskab tilføjes dennes logo i øverste venstre hjørne. Maximale logostørrelser: 180px 50px Logoer skal tilpasses enten højde eller bredde afhængigt af logoet udformning. Dernæst centreres logoet i div en på sitet. Forsidebilleder Forsidens formål er at byde brugeren velkommen. Kunden kan vælge at tilføje billeder, som er relevante for virksomheden, i den store header på forsiden, samt i den mindre boks forneden til venstre. Billedestørrelser: Header-billede 1000px 300px Boks-billede 493px 310px (videoframe: 453 x 220px) Indtil billeder fås af kunden benyttes Butlers Grontmij-standard billeder eller video. Boksen forneden til højre er forbehold Butler-kommunikation. Her kan lægges informationer om nye opdateringer, tips til brug af programmet, tilbud om tillægsydelser, video, osv. Eksempler Side 12 af 13

13