Logo
Hvordan legge til og konfigurere logo i applikasjon
Altinn.App.Core
eller høyere for å kunne sette applikasjonslogoBruke logo fra tjenesteeier
For å bruke tjenesteeiers logo spesifisert for organisasjonen i altinn-orgs.json
kan du skrive følgende i applicationmetadata.json
:
App/config/applicationmetadata.json
{
"logo": {
"source": "org",
"displayAppOwnerNameInHeader": true
}
}
Hvis du ønsker å bruke en annen logo for applikasjonen, kan du spesifisere dette i resource.json med verdien
App/config/texts/resource.nb.json
{
"id": "appLogo.url",
"value": "https://altinncdn.no/orgs/brg/brreg.png"
}
Hvis logoen din allerede inneholder navnet på organisasjonen som applikasjonen representerer, ønsker du kanskje ikke at
app-eieren skal vises i overskriften. Du kan deaktivere dette ved å sette displayAppOwnerNameInHeader
verdien til false
.
App/config/applicationmetadata.json
{
"logo": {
...
"displayAppOwnerNameInHeader": false
}
}
Dersom du ønsker å overstyre navnet på tjenesteeieren, kan du gjøre dette i resource.json
med verdien
App/config/texts/resource.nb.json
{
"id": "appOwner",
"value": "Brønnøysundregistrene"
}
Du kan også overstyre alt-teksten på logoen:
App/config/texts/resource.nb.json
{
"id": "appLogo.altText",
"value": "Logo til Brønnøysundregistrene"
}
Bruk egendefinert logo
For å bruke din egen logo, må den først lastes opp.
- Lage en mappe med navnet
wwwroot
. Denne skal ligge under App-mappen,App/wwwroot
. - Last opp logoen, som følger designretningslinjene, til mappen.
Husk at hver tekstressursfil (resource.[language].json
) må oppdateres for at endringene skal vises i alle språk.
App/config/texts/resource.nb.json
{
"id": "appLogo.url",
"value": "/{appID}/{logoName}.svg"
}
Her refererer appID
til id
egenskapen i applicationmetadata.json
.
App/config/texts/resource.nb.json
{
"id": "appLogo.url",
"value": "/digdir/bli-tjenesteeier/logo_digdir.svg"
}
Til slutt så må source
i applicationmetadata.json
endres til å være resource
for å hente logoen som ble lastet opp.
App/config/applicationmetadata.json
"logo": {
"displayAppOwnerNameInHeader": false,
"source": "resource",
"size": "medium"
},
Egenskaper
source
Spesifiserer fra hvor kilden til logen skal hentes. Har to gyldige verdier:
"org"
: Logoen hentes fraaltinn-orgs.json
."resource"
: Logoen hentes fra tekstressursfilene. Henter verdien med id"appLogo.url"
displayAppOwnerNameInHeader
Spesifiserer om tjenesteeiers navn skal skrives ut ved siden av logoen. Henter navnet på tjenesteeier
direkte fra altinn-orgs.json
dersom appOwner
ikke er definert i tekstressursfilene
size
Altinn.App.Core
eller høyere for å kunne sette størrelse på logoenFor noen logoer passer ikke alltid standardstørrelsen til logoen. Størrelsen kan spesifiseres ved hjelp av size
-egenskapen.
Den har tre gyldige verdier:
"small"
"medium"
"large"
Størrelsen er som standard satt til "small"
hvis den ikke er spesifisert.
Designretningslinjer for app-eier logo
Størrelse og skala:
Logoet bør ha en passende størrelse og ha nok klart rom rundt seg for å unngå visuell uorden. En god huskeregel er å holde logoens bredde til maksimalt 32px.
Justering:
Logoet vil bli justert til øvre venstre hjørne av skjemaet for å opprettholde konsistens og enkel gjenkjennelse.
Kontrast og lesbarhet:
Logoet bør ha tilstrekkelig kontrast mot bakgrunnen for å sikre at det er lesbart. Hvis logoen inkluderer tekst, bør teksten være lesbar og ikke for liten.
Logovarianter:
Hvis logoen din finnes i ulike varianter (for eksempel farge, svart-hvitt, monokrom), velg den som passer best til skjemaets design og bakgrunnsfarge.
Testing og iterasjon:
Plasseringen av logoen bør testes på ulike enheter og skjermstørrelser for å sikre at den ser ut og fungerer som tiltenkt. Test den på mobilskjermer og nettbrett. Vurder å samle tilbakemeldinger fra brukere eller kolleger og gjøre iterasjoner på designet om nødvendig.
Tilgjengelighet:
Logoens farger og plassering bør oppfylle tilgjengelighetsretningslinjer for å imøtekomme brukere med ulike visuelle behov. Alt-tekst på logoen er nødvendig for skjermleser. Alt-teksten på logoen bør gjenspeile valgt språk, f.eks. " Utdanningsdirektoratets logo"