INTRODUKTION. Disse retningslinjer skal overholdes i al digital kommunikation samt i softwareprogrammer fra SEGES.

Transkript

1 DIGITAL DESIGNGUIDE

2 INTRODUKTION Vores digitale designguide udstikker retningslinjerne for digital formidling af vores visuelle identitet og vores brand. Målet er at formidle et moderne, entydigt og imødekommende billede af SEGES på nettet og digitalt, hvor sammenhæng og enkelthed er vigtige faktorer. Det er vigtigt, at brugeren fornemmer et identisk univers på tværs af digitale platforme. Derfor har vi nogle faste retningslinier, som skal følges. F.eks. Brug SEGES farver og grafik i et gennemtænkt design Tænk enkelhed og relevans i forhold til modtageren Skriv informative tekster som er præcise og korte Brug billeder i webopløsning til at understøtte teksterne I denne digitale designguide finder du informationer om korrekt brug af de elementer, der indgår i SEGES digitale identitet. Guiden er dynamisk og vil blive opdateret løbende.. Disse retningslinjer skal overholdes i al digital kommunikation samt i softwareprogrammer fra SEGES. Har du spørgsmål til guiden, eller mangler du redskaber? Så kontakt en af nedenstående fra vores marketingafdeling. Marketingskonsulent Birgitte Wulff Mikaelsen på mail [email protected]

3 FARVER UDVALGTE FARVER TIL WEB Nedenfor ses farveskalaen for SEGES website. Farvevalget er truffet udfra SEGES grundfarver med hensyntagen til kontrastforhold på skærme. Farvepaletten indeholder: Logoblå - bruges primært til footer element og baggrundsfarve i bokse med negativ tekst Logogrøn - bruges kun i begrænset omfang som boksbaggrund med negativ tekst samt i logo Sand - bruges primært til menuer og baggrundsfarve i bokse Orange - bruges kun til links Koksgrå - Bruges kun til tekst Her finder du RGB- og Hexkoder: R: 7 G: 100 B: 113 # R: 78 G: 128 B: 141 #4E808D R: 79 G: 115 B: 74 #4F734A R: 124 G: 152 B: 119 #7C9877 R: 180 G: 197 B: 176 #B4C5B0 R: 212 G: 211 B: 194 #D4D3C2 R: 224 G: 224 B: 212 #E0E0D4 R: 240 G: 240 B: 233 #F0F0E9 R: 233 G: 93 B: 15 # E95D0F R: 85 G: 85 B: 85 # Supplerende farver fra grundguiden R: 125 G: 163 B: 173 #7DA3AD R: 180 G: 202 B: 210 #B4CAD2 R: 9 G: 86 B: 44 #09562C R: 200 G: 199 B: 178 #C8C7B2 R: 157 G: 220 B: 249 #9DDCF9 R: 195 G: 228 B: 250 #C3E4FA R: 214 G: 236 B: 251 #D6ECFB R: 234 G: 245 B: 253 #EAF5FD R: 221 G: 136 B: 84 #DD8854 R: 255 G: 216 B: 0 #FFD800 R: 236 G: 236 B: 235 #ECECEB

4 TYPOGRAFI SEGES benytter som primær skrifttype LF Press Sans. Den anvendes som gennemgående skrift i alt trykt materiale, til messer og konferencer samt i overskrifter på hjemmesider, hvor det er muligt. Skriften bruges primært i varianterne Regular, Light, Heavy og Italic. Ved at bruge Heavy sammen med Regular skaber vi en god kontrast i skriftbilledet. Her er reglen at Heavy altid anvendes først i overskriften og regulær på resten. Som brødtekst anvendes Arial som er en standardfont der er tilgængelig på alle platforme. Nedenstående angivne størrelser anvendes idag på seges.dk og er størrelsesmæssigt retningsgivende. Dog kan det være nødvendigt at variere af pladsmæssige hensyn på enkelte IT-Produkter. H1 45px LORU PIM SUMMARIUM (Teaser tekst) 24px Lorupim summarium - Regulær H2 24px Lorupim summarium - Bold H3 16px Lorupim summarium - Bold P 14px (Brødtekst) Lorupim summarium - Regular A 14px (Links - underline på hover/mouseover) * Lorupim summarium - Regular * På softwareprodukterne kan farven logoblå benyttes som linkhenvisning og farven orange til CTA

5 GRAFISKE ELEMENTER MØNSTERGRAFIK Inspirationen til SEGES grafik kommer fra marker og afgrøder, som set fra oven danner de fineste mønstre. Grafikken Striped Fields består af en række geometriske former, der - ved brug af farverne fra SEGES farvepalet - er sammensat til et unikt mønster. MØNSTER STRIPED FIELDS UDSNIT AF MØNSTER STRIPED FIELDS BRUG AF MØNSTER De viste udsnit ovenfor kan bruges som visuelt og identitetsskabende elementer på SEGES website, hvor bundfarven er hvid. Striped Fields kan bruges som helt billedfelt på tværs af sitet. På helt hvide flader kan Striped Fields også bruges som hjørneeffekt. Striped Fields må aldrig placeres oven på et billedfelt. Skal grafikken bruges i forbindelse med et billede, kan hjørnegrafikken placeres på en eventuel hvid top eller bund, som er over/under billedet. Download udsnit af Striped Fields (ai-fil)

6 BILLEDSTIL Billeder er en vigtig del af vores kommunikation. For at sikre et fælles udtryk skal billedstilen bygge på en række ord, som udtrykker essensen af virksomhedens værdier. Disse ord er: Åbenhed, dialog, glæde, engagement, myndighed og troværdighed. Kvaliteten skal være professionel og ensartet, så billedserien fremstår som en samlet enhed. Der vil være faglige billeder, hvor det konkrete motiv/situation prioriteres, men høj billedkvalitet bør altid tilstræbes. Vi arbejder seriøst med billeder og vælger fotografer, der følger stilen. Til brug i vores corporate branding arbejde findes en række imagebilleder, som kun må anvendes til profilering af SEGES. I Apps og softwareprodukter anvendes fortrinsvis grafik. Billeder benyttes derfor kun i begrænset omfang.

7 MENU SEGES.dk anvender som standard venstre burger menu. Ved menuaktivering fremkommer venstrestillet sidemenu med op til 3 underniveauer. Den overordnede menu (1. niveau) skrives med versaler mens undermenuer skrives med store og små bogstaver (sos). Dog skrives SEGES altid i versaler. Undtagelse: På software-produkter kan første niveau skrives i sos,hvis det skønnes nødvendigt af pladsmæssige årsager. Vær dog opmærksom på, at anvendelsen af versaler er med til at give SEGES-designet sit særpræg samt et nutidigt look. Ved spørgsmål, så kontakt en af nedenstående fra vores marketingafdeling. Grafiker Marianne Kalriis på mail [email protected] Marketingskonsulent Birgitte Wulff Mikaelsen på mail [email protected] Niveau 1: Bundfarve: #D4D3C2 Fontfarve: # Font: LFPressSans(versaler) Fontstørrelse: 18px Hover: Underline Active color: # Niveau 2, 3 & 4: Bundfarve: #FFFFFF Fontfarve: # Font: LFPressSans Fontstørrelse: 16px Hover: Underline Active color: #076471

8 KNAPPER SEGES web bruger to typer knapper som kan benyttes på både hvid, farvet- og billedbaggrund. Selve knappen er firkantet med skarpe hjørner. Tekst i knapper sættes i versaler. Den logoblå knap bruges som primærknap. Den transparente knap med hvid/grå outline bruges som sekundærknap. Det tilstræbes at der ikke forekommer 2 logoblå primærknapper efter hinanden. Størrelserne på knapperne kan variere afhængigt af tekstlængden, men grundprincippet er det samme. Fonten LF Press Sans Bold bruges altid på knapper uanset størrelse. På visse softwareprodukter kan det dog være nødvendigt, at anvende flere primærknapper efter hinanden ligesom det - på grund af pladshensyn - kan blive nødvendigt at ændre til store og små bogstaver i skrifttypen Arial. Primær knap Standard # Sekundær knap (på lys bg) Standard transparant bg Hover (Mouse over) #4E808D Hover (Mouse over) #D4D3C2 Eksempel Eksempel Primær hover (mouse over) Eksempel Sekundær hover (mouse over)

9 LOOK & FEEL EKSEMPLER Webdesignet er udarbejdet, så alle sider har samme top bestående af SEGES logo, stort valgfrit foto i hele sitets bredde, menubar og søgefunktion. Nedenfor vises forsiden på seges.dk. Under toppen er siden opbygget med seks infomoduler med mouseover-/fadeinfunktion. SEGES stried fields grafik er brugt som infobaggrund for at underbygge SEGES identiteten. Der anvendes flade grafiske elementer ved links til SEGES akademi, SEGES forlag samt SEGES software. I footeren er der ligeledes brugt flade grafiske elementer ved links til sociale netværk. Ved mouseover...fader infoboksen op...

10 LOOK & FEEL EKSEMPLER Undersiden OM SEGES er bygget op som tekstside med infomoduler i SEGES webfarver (her uden mouseover) samt med små Læs mere bokse i højre side.

11 LOOK & FEEL EKSEMPLER Undersiden RÅDGIVNING er bygget op med 9 infomoduler i SEGES webfarver (nogle med/nogle uden mouseover) samt med enkelt Læs mere boks i højre side. Ved mouseover...fader infoboksen op...

12 SOFTWARE PRODUKT-IKONER SEGES software produkt-ikoner er flade kvadratiske ikoner placeret ovenpå udsnit af stribed fields grafik med skarpe hjørner. (Dog ikke ikoner på apple enheder da disse automatisk konverterer til runde hjørner). Bundgrafikken er en del af ikonet og ikonet må ikke skilles ad i enkeltdele. Alle ikoner er udarbejdet i 3 størrelser Størrelse 1 (stor), med udsnit af stribed fields som baggrund. Anvendes fra 33x33px og opad. Størrelse 2 (medium), med farveflader som baggrund. Anvendes fra 17x17px - 32x32px. Størrelse 3 (lille), med ensfarvet baggrund. Anvendes op til 16x16px. 56 x 56px 32 x 32px 16 x 16px Ikonerne må KUN bruges i forbindelse med det konkrete software produkt. Ikoner DMS Farmtracking INVE KemiTjek LetFarm Mark Mobile Datamanagement Ø90 Planteværn Mark Online Summax Vandregnskab Webdyr Vektor af alle ikonerne som SVG og AI kan hentes herunder. Hent ikoner som Vektor (SVG) Hent ikoner som Vektor (AI) ANDRE GRAFIKELEMENTER Hvor der er brug for anden grafik anvendes flad grafik, uden effekter som skygger, bevel / embos osv. Grafikeksempel Vi benytter også standard ikoner fra... til at understrege handlinger. Disse kan hentes her:... Ved spørgsmål, så kontakt en af nedenstående fra vores marketingafdeling. Grafiker Marianne Kalriis på mail [email protected] Marketingskonsulent Birgitte Wulff Mikaelsen på mail [email protected]

13 EKSEMPEL PÅ APP Eksempel på SEGES-app med brug af flade grafikker og holdt i SEGES digitale farveunivers. Her går strukturen og den logoblå, logogrønne, sand og koksgrå farvepalette igen.

14 EKSEMPEL PÅ SOFTWARE

15 EKSEMPEL PÅ SOFTWARE

16 LOGIN Loginsider på tværs af software-produkterne udformes ensartet. Produktnavn placeres i grøn bjælke efterfulgt af produkt-ikon når det er et SEGES Software produkt: Baggrundsfarve: #B4C5B0 Tekstfarve: #4F734A Login-knap Følger retningslinier fra knapper. Eksempel DLBR Fælles Login Eksempel IT-login Mobil App.