Retningslinjer for web

1. Logo

Designmanualens retningslinjer for bruk av logo er også gjeldende for bruk av logo på nett. Den horisontale NHO logoen har en minimumshøyde på 25 piksler. Ved bruk av vertikal logo er minimumshøyden 37 piksler. Det er viktig at NHO-symbolet aldri er mindre enn 25 piksler.

2. Visuelt system

Designmanualens retningslinjer for bruk av visuelle elementer er også gjeldende ved bruk av elementene på nett. Det visuelle systemet kan også tilpasses spesielle formål ved bruk på nett. Eksempler på dette kan være:

  • Banner, for å fremheve overskriften på en side.
  • Elementer for å fremheve innhold eller linker.
3. Farger

Designmanualens retningslinjer for bruk av farger er også gjeldende ved bruk av farger på nett. Ved bruk av farger på nett er det likevel viktig a følge retningslinjer for universiell utforming for å sikre god lesbarhet. Dette er spesielt viktig å ta hensyn til ved bruk av farger bak tekst.

4. Typografi

Designmanualens retningslinjer for bruk av typografi er også gjeldende ved bruk av tekst på nett. Tekstfargen som følger den nye identiteten på nettsiden er en lysere nyanse av svart, #222222 eller RGB(34,34,34); Denne fargen skal helst ikke brukes på hvit bakgrunn, men heller anvendes på en lys grå bakgrunn; #f9f9f9 eller RGB(249, 249, 249)

5. Ikoner

Ikoner skal ha lav kompleksitet og høy kontrast. Unngå innramming og overdreven bruk av avrundinger. Ved navigasjon, forsøk å bruke ikoner rett på bakgrunnen uten ramme. Ikke bruk for tynne ikoner ved navigasjon, sørg for høy kontrast. Balansér vennligheten i et brukergrensesnitt med helt rettkantede knapper og helt avrundede knapper. Unngå harde skygger, gradienter eller høylys.

Enkle ikoner, med tynne linjer kan bli brukt som illustrasjoner. Her kan du se en oversikt over alle ikonene som for øyeblikket er brukt på NHO.no. Hvis du trenger et ikon, kan du finne en rekke gratis ikoner i settet Ionicons.

6. Knapper og linker

Det er flere måter å formgi knapper og veilede lesere til handling.

Hovedknapper er 44 piksler høye, med avrundede hjørner. Tekst brukt inni knappen er satt til Avenir Next LT PRO, og inneholder også en pil som peker til høyre. Knapper har en bakgrunnsfarge. Bakgrunnsfargen er enten en farge fra fargepaletten eller en lys grå (#f5f5f5).

Fargen på teksten avhenger av hvilke farge som er brukt på knappen. Ved bruk av en lys grå bakgrunnsfarge på knapp, skal teksten være mørk grå (#222222). Pilen skal være i samme farge som linkene.

Hvis knappen er i en av fargene fra fargepaletten, kan retningslinjer for bruk av farger være veiledende for å velge farge til tekst. Det er viktig å ta hensyn til at det skal følge retningslinjene for universell utforming på nett.

Linker er vanligvis blå (#006ba2) og bold, ikke understreket. Du kan fremheve viktigheten av en link ved å legge til en pil til slutt. Pilen er den samme som er brukt i knapper. Pil kan også brukes i overskrifter, som er linker, "les mer" linker eller sekundære knapper.

7. Banners

Du kan bruke følgende rettningslinjer når du lager små bannere på nett for å annonsere arrangementer. Bannere burde ha en flat overflatefarge, med en eller flere farger fra paletten og en subtil gradient over.

Gradienten er 100% transparent nederst til venstre på banneret og 10% transparent hvit øverst til høyre. Dette gir fargen mer bevegelighet og en opplevelse av et lys som skinner ned fra øverste høyre hjørne. Ved valg av farge på tekst følges retningslinjene for bruk av farge i designmanualen.

Det er viktig å ta hensyn til retningslinjene for universell utforming på nett for å oppnå god lesbarhet. Ikoner kan brukes inni banneret som en illustrasjon, overskrift og en kort undertittel sammen med en pil som oppfordrer til handling eller "les mer"

Banneret kan også inneholde elementer fra "visuelt system", som vist i bilde. Hvis du lager en hvit banner, skal det legges til 1 piksel ramme rundt banneret. Fargen på rammen bør være #d1d8db.