Brug af farver

I dette afsnit kan du læse om "do's and don'ts", når du skal vælge farver på en webside.

Baggrundsfarver

Du kan vælge baggrundsfarver på udvalgte moduler som multibokse, innergrids og linklister.

Du kan vælge mellem disse forskellige baggrundsfarver:

FVST Blå

Grøn

Gul

Lys beige

Beige

Modul med ramme omkring

Sådan ændrer du farve

  1. Åbn modulet
  2. Gå til Indstillinger
  3. Vælg farve i Baggrundsfarver-listen - men vær opmærksom på, hvilke farver du må bruge sammen.

Se en video om, hvordan du ændrer baggrundsfarve på et modul

Vælg den rigtige farvesammensætning

Det kan være svært at gennemskue, hvilke farver du skal vælge, når du opretter et modul i GoBasic. Her kommer et par gode tommelfingerregler:

Brug den blå farve som udgangspunkt

Som udgangspunkt bruger vi "FVST blå" som baggrundsfarve på kasser, linklister mm. Dog kan der være tilfælde, hvor du som redaktør har brug for at bruge andre farver, eksempelvis "Lys beige".

Opmærksomhedsfarven

Den gule farve er en opmærksomhedsfarve. Brug denne farve, hvis du vil markere særlig vigtig information som "OBS" eller "Breaking"-bokse. Det er vigtigt at være konsekvent ved brugen af denne farve, så brug den ikke på eksempelvis normale link- eller tekstbokse.

Det kan være fristende at give den gas med hele farvepaletten og vælge én af hver på en side. Det kan dog skabe et lettere kaotisk udtryk, og det kan være svært for læseren at finde overskuelighed i et udtryk som dette:

Information

Læs venligst dette:

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.

NB

Husk også:

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.

Servicemeddelelse

Husk at tilgå årets konference

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.

Breaking news

Vigtigt for nyuddannede dyrlæger

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.

Nyhed

Servicemeddelelse til alle autoriserede fødevareforhandlere

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.

I stedet for at vælge en masse farver, så beslut dig for at vælge maksimalt to forskellige baggrundsfarver på hver side, du laver. Tænk på baggrundsfarverne som "opmærksomhedsfarver": Brug dem til at lede brugerens opmærksomhed hen på en særlig information.

I eksemplet bruges farverne til at indkapsle særlige informationer, som man gerne vil have læseren til at fokusere på. Samtidigt bryder de også artiklen op og skaber luft og overskuelighed.

Se eksempel på brug af farver:

Sem Pellentesque Lorem

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Condimentum Adipiscing

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mollis Vehicula

Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue.

Sollicitudin Adipiscing Cursus

Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.

Amet Tellus Bibendum

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Lorem Quam Ullamcorper Elit

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Men - hvad hvis du gerne vil lave to forskellige farver ved siden af hinanden?

Det kan være, du står i en situation, hvor du har brug for at sidestille to tekstbokse, hvoraf den ene har en højere plads i det visuelle hierarki end den anden. Her vil vi anbefale ikke at bruge to mørke "pangfarver" ved siden af hinanden, men derimod en blid og en hård.

På denne måde skaber du mere opmærksomhed på kassen, der har den hårde farve end på boksen med den bløde farve. 

Se et par eksempler på hårde og bløde farver:

Hård baggrundsfarve

Denne boks kalder på mere opmærksomhed, da den har en mørkere/hårdere baggrundsfarve.

Blid baggrundsfarve

Denne boks tiltrækker ikke ligeså meget opmærksomhed som dens sidemakker.

Blid baggrundsfarve

Denne boks tiltrækker ikke ligeså meget opmærksomhed som dens sidemakker.

Hård baggrundsfarve

Denne boks kalder på mere opmærksomhed, da den har en mørkere/hårdere baggrundsfarve.