Designriktlinjer

Övergripande riktlinjer för Idrottsarenan Förbund och Idrottsarenan Förening

Designprinciper

Designprinciperna vägleder hur vi tänker, och hur våra målsättningar ser ut, när det gäller att utforma lösningarna så att de ger användarna ett stöd som passar deras sammanhang, förmåga och behov.

idrottsarenan-designprinciper-A.png

Användarmedverkan

Vi utgår från en förståelse för användarnas behov, mål och utmaningar, inte gissningar. Användarna involveras ofta och regelbundet för att lämna återkoppling och bidra med insikter.

Smart återkoppling

Ger tydlig, lättläst och relevant stödinformation för det användaren vill åstadkomma, så att användaren känner sig trygg och kan justera sitt beteende och planering vid behov.

Funkar på språng

Systemet anpassar sig efter användaren vid stor eller liten skärm, eller när inmatning av information underlättas av smarta alternativ.

Inkluderande vägledning

Enkla och guidande flöden oavsett förmåga. Användaren kan ångra, korrigera, börja om eller hitta mer hjälp. Designen är förutsägbar och ergonomisk.

Stabil grund

Standardlösningar säkerställer kompatibilitet och datakvalitet samt underlättar förvaltning. Informationssäkerheten hålls på en hög nivå.

Färger

Huvudfärger

Riksidrottsförbundets huvudfärger är blått, gult och svart.

Mörkblå #1e3479
Gul #ffed35
Svart #000000

Nyanser av huvudfärgerna

Huvudfärg

120%

 80% 60% 40% 30% 20%
Mörkblå #1e3479 #0f1a3d #4b5d94 #7885af #a5aec9 #d2d6e4 #f2f3f7
Huvudfärg 80% 60% 40% 30% 20% 5%
Gul #ffed35 #fff15d #fff485 #fff8ae #fff9c2 #fffbd7 #fffef5
Huvudfärg 80% 60% 50% 40% 20% 10% 5% 3%
Svart #000 #333 #575756 #808080 #b2b2b2 #d4d4d4 #e4e4e4 #f6f6f6 #fbfbfb

Komplementfärger

Som komplement finns en palett av färger som fungerar harmoniskt tillsammans. Nyanser av färgerna kan också användas.

Komplementfärg 80% 60% 40% 30% 20% 10%
Ljusblå #00a7e0 #33b9e6 #66caec #99dcf3 #b2e4f5 #ccedf9 #e5f6fb
Mellanblå #006bb1 #3389C1 #66a6d0 #99c4e0 #b2d2e7 #cce1ef #e5f0f7
Ljusröd #e4352d #e95d57 #ef8681 #f4aeab #f6c2c0 #fad7d5 #fceaea
Mörkröd #be1219 #cb4147 #d87175 #e5a0a3 #ebb7ba #f2d0d1 #f8e7e8
Ljusgrön #1eafa0 #4bbfb3 #78cfc6 #a5dfd9 #bbe7e2 #d2efec #e8f7f5
Mörkgrön #007b5e #33957e #66b09e #99cabf #b2d7ce #cce5df #e5f1ee
Ljusgrå #b2b2b2 #c1c1c1 #d1d1d1 #e0e0e0 #e7e7e7 #f0f0f0 #f7f7f7
Mörkgrå #575756 #797978 #9a9a9a #bcbcbb #cccccc #dddddd #eeeeee

Bakgrunder

Bakgrunder för olika typer av meddelanden som presenteras på sidor och i formulär. Dessa är nyanser av komplementfärgerna.

Bekräftelse – grön

#bbe7e2

Information – blå

#b2e4f5

Observera – gul

#fff9c2

Varning – röd

#fad7d5

Statusar

Bakgrundsfärger som används för olika statusar i Idrottsarenan. Dessa presenteras ofta som "pills" eller små etiketter med rundade hörn. Här finns en poäng med att de skiljer sig från bakgrunderna för meddelanden, då bägge ska kunna vara synliga på samma sida men inte nödvändigtvis antas ha en relation till varandra.

Färg Används för (typ av statusar och "pills")
Blå #deedff Blått används för neutrala statusar (som inte behöver ageras på i närtid)
Grön #dcfce7 Grönt används när man som slutanvändare har blivit klar med en uppgift som sedan ska omhändertas av en annan part. Eller när något har blivit godkänt.
Gul #fef3c7 Gult används när man som slutanvändare har något att agera på.
Röd #fcddd0 Rött används när man behöver agera på något i närtid.
"Svart" #d4d4d4 Grå bakgrund används när något är färdigt, som i status "avslutat ärende".
Outline VIt bakgrund med svart ram används för utkast.

Roller / behörigheter

Färger som används vid visning av olika roller och behörigheter. Dessa kan också komma att användas i olika sammanhang där "märkningar" med olika kategorier/ämnen behövs. Dessa speglar status-färgerna med några tillägg vid behov. Vi undviker också den typ av färger som ofta kan förknippas direkt med lagfärger tillhörande vissa lag.

Färg Används för (exempel)
Alternativ 1 #dcfce7 kategori: Nyckelroll
Alternativ 2 #deedff kategori: Förening
Alternativ 3 #fef3c7  kategori: sektion 1
Alternativ 4 #ffdef2 kategori: sektion 2
Alternativ 5 #beefea kategori: sektion 3
Alternativ 6 #b0deff kategori: sektion 4
Alternativ 7 #fcddd0 kategori: sektion 5

Knappar

Exempel på knappar

Användning

Om placering

Om tillgänglighet

Använd button för att ange en knapp i koden, och undvik länkar som ser ut som knappar. Koden för button tillför viktiga funktioner avseende tillgänglighet. För att särskilja knappar som heter samma sak på en sida (till exemnpel flera Redigera-knappar) är det viktigt att använda en label som också ger mer information, till exempel vad det är man redigerar med knappen. En skärmläsare kommer annars bara läsa upp "Redigera" flera gånger och användaren kan få svårt att veta vilken knapp som är vilken. Exempel på angivelse av tydlig label : <button aria-label="Redigera roller">Redigera</button>.

Om inaktiva knappar

Vi undviker helt användning av inaktiva knappar. Beroende på sammanhang är det bättre att

Problemet med inaktiva knappar är att de förvirrar mer än de hjälper och de funkar dåligt ur ett tillgänglighetsperspektiv. De är ofta designade så att de inte går att läsa (kontrasten är dålig) eller så är det inte uppenbart vad man måste gör för att knappen ska kunna användas.

Specifikationer

Egenskap

Beskrivning
Typsnitt

Proxima nova semibold
Typsnitt storlek Motsvarande 14px
Padding vänster-höger

Motsvarande 20px
Padding uppe-nere

Motsvarande 14px
Rambredd

1px
Mellanrum mellan knappar som ligger på rad
20px om inget annat anges
Primär knapp bakgrund
#006bb1
Primär knapp ramfärg
#006bb1
Primär knapp textfärg

#fff
Primär knapp bakgrund : hover
#1e3479
Primär knapp ramfärg: hover
#1e3479
Primär knapp textfärg: hover

#fff
Sekundär knapp bakgrund
#fff
Sekundär knapp ramfärg
#006bb1
Sekundär knapp textfärg

#006bb1
Sekundär knapp bakgrund : hover
#cce1ef
Sekundär knapp ramfärg: hover
#006bb1
Sekundär knapp textfärg: hover

#006bb1
Varningsknapp ramfärg
#e4352d
Varningsknapp textfärg

#e4352d
Varningsknapp bakgrund : hover
#fad7d5
Varningsknapp ramfärg: hover
#e4352d
Varningsknapp textfärg: hover

#e4352d

Formulärvalidering

Error summary

När användaren skickar ett formulär där alla fält inte har fyllts i på rätt sätt sammanfattar vi dessa fel i toppen av sidan och förflyttar fokus dit, inklusive att vi använder oss av en ankarlänk så att även skrollningen av sidan hamnar rätt. Skrollningen gör att de som använder zoom-verktyg och bara ser en del av sidan också ser sammanfattningen.

Referenser

Vem gynnas?

Metoden syftar till att ge en överskådlig ingång till de fel som behöver åtgärdas, som både tydliggör vad som orsakar att man inte kommer vidare och ger användaren kontroll över hur de vill börja åtgärda felen. eEtta gynnar…

Exempel

Ikoner i Idrottsarenan förening

Det går att använda svg som inline eller som refererad fil. Här återfinns oftast bägge varianter. Observera att färg går att byta genom att ange färg för svg-filen eller genom att ända färgangivelse direkt i koden som bäddar in svg-bilden.

Ekonomiska stöd

Ikon för handläggarinitierad ansökan

icon-handlaggarinitierad.png

Ladda ner: handlaggarinitierad.svg

Kod för ikonen:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: rgb(180, 83, 9);"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><polyline points="16 11 18 13 22 9"></polyline></svg

Sidor som ikonen används på:

Ikoner i Idrottsarenan förbund

I Idrottsarenan förbund kan de flesta menyval ha en egen ikon. Här samlas de ikoner som är specifikt framtagna för olika delar av gränssnittet (framför allt menyvalen).

Menyval Ikon
Nätverket -> Organisation -> Organisationsansökan org-ansokan.svg
Admin > RF konfiguration > Noteringar konfig noteringar-konfig.svg

Välja ny ikon

 Här kommer stöd för att välja rätt typ av ikon för detta.

Riksidrottsförbundet rekommenderar användningar av Material Icons som kan sökas fram och laddas ner hos Google på adressen https://fonts.google.com/icons

Egenskaper

För att säkerställa att ikonerna har ungefär samma typ av utseende (bredd på streck och färg) kan du söka fram ikoner med hjälp av följande filter:

Och när du laddar ner en ikon ska du göra det i svg-format och kan skriva in denna färg: #575756

Så här ser filtret ut när du söker (de svarta siffrorna har jag lagt till)

CleanShot 2025-10-14 at 09.34.54@2x.png

Så här valen ut när du laddar ner(de röda pilarna har jag lagt till)

När du trycker på knappen för svg så laddas ikonen ner.

CleanShot 2025-10-14 at 09.39.58@2x.png

Det är absolut okej att ta fram ikoner på andra sätt också, men du kan använda information här med målet att efterlikna manéret i ikonerna, färg och tjocklek på streck.

Du är här

En utmaning är att göra det lätt för användaren att förstå vilken förening de just nu arbetar med. Det kan vara så att de tillhör flera föreningar och rör sig mellan dessa, och behöver känna sig trygg med att de agerar på "rätt" förening. När man arbetar på mobilen så är också vänstermenyn stängd.

Det är därför viktigt att vi kommunicerar var användaren är just nu i alla lägen. Det gör vi genom att i innehållsytan skriva ut

  1. föreningens namn
  2. en sökväg (brödsmula) som indikerar var man är i sajtstrukturen, och
  3. har en tydlig rubrik för sidan man är på just nu.

Det kan se ut så här:

 

ia-mobil-narvaro.png


<header aria-label="Aktuell förening">
  <p>Norrlands Multisport- och Friluftsförening</p>
</header>

<header aria-label="Sökväg">
  <a href="/start">Start</a> / Aktiviteter - Närvarorapportera / Träning juniorer</a>
</header>

<h1>Träning juniorer</h1>

Grafiska riktlinjer för utskick

Utskick avser meddelanden som går ut som e-post direkt till användare i Idrottsarenan.

Validering

Tvingande format och regelverk för visning av olika innehållstyper.

Söker du riktlinjer för hur vi ska visa felmeddelanden vid validering i Idrottsarenan förening? Se Formulärvalidering.

Vägledande dokument

Bakgrunder

Exempel på en blå bakgrund med arena-streck.

bg-svg.png

Använda som bakgrund

Man väljer själv beroende på sammanhang om man använder svg inbäddad i sidan, eller hänvisar till en svg-fil som ligger på annan plats.

Fil att ladda ner

Bädda in svg

Och här är svg-koden för samma bakgrund. När koden är inbäddad har man inga externa beroenden. Notera att färgkoden för fill är det som ger den blå bakgrunden. Den färgen går alltså att byta ut mot andra färger i RF:s palett för en annan färg på bakgrunden men samma linjer. Den här koden går att kopiera in i en textfil som man sedan sparar med filändelsen .svg - man får då en egen SVG-bild för bakgrunden.

<!-- RF brand SVG – full-bleed background, decorative -->   <svg class="bg-svg" aria-hidden="true" focusable="false"        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"        viewBox="0 0 1919 1237" preserveAspectRatio="xMidYMid slice">     <defs>       <path id="a" d="M.992.136h837.681v1355.79H.992z"/>       <path id="c" d="M1.774 1.304h368.062v462.03H1.774z"/>       <path id="e" d="M1.774 1.462h407.039v458.185H1.774z"/>       <path id="g" d="M1.774.845h431.318v992.592H1.774z"/>       <path id="i" d="M1.774.603H487.07V1002.95H1.774z"/>       <path id="k" d="M1.774 1.205h1138.862v500.35H1.774z"/>     </defs>     <rect width="1919" height="1237" fill="#006bb1"/>     <g fill="none" fill-rule="evenodd" opacity=".8">       <g transform="translate(1079.573 -87.52)">         <mask id="b" fill="#fff"><use xlink:href="#a"/></mask>         <path stroke="#FFF" stroke-width=".5" d="M140.573 135.487C140.573 58.375 78.081-4.138.992-4.138m233.492 139.625C234.484 6.492 129.946-98.08.992-98.08m327.4 233.568c0-180.874-146.583-327.502-327.4-327.502m421.304 327.502c0-232.752-188.622-421.436-421.304-421.436m515.213 421.436c0-284.633-230.67-515.373-515.213-515.373m609.12 515.373C610.112-201.025 337.4-473.82.992-473.82m703.025 609.307c0-388.39-314.757-703.244-703.025-703.244M843.635 523.17c-77.09 0-139.584 62.513-139.584 139.625m139.584-233.566c-128.957 0-233.496 104.57-233.496 233.566m233.496-327.502c-180.82 0-327.402 146.628-327.402 327.502m327.402-421.437c-232.685 0-421.307 188.684-421.307 421.437m421.307-515.37c-284.545 0-515.214 230.738-515.214 515.37M843.635 53.488c-336.41 0-609.12 272.797-609.12 609.307m609.12-703.242c-388.27 0-703.028 314.853-703.028 703.242m563.437-527.349v1264.74m-93.955-1264.74v1265.777M516.137 135.446v1264.74m-93.955-1264.74v1265.777M328.227 135.446v1264.74M234.273 121.355v1279.868M140.318 135.446v1265.777m563.437-735.766H140.318M694.362 886.93h-74.531m-19.374 0h-74.536m-93.902 0h74.532m-168.441 0h74.536m-168.44 0h74.533m-168.44 0h74.533" mask="url(#b)"/>       </g>       <path stroke="#FFF" stroke-width=".5" d="M484.017 152.947v1001.8m.08.107c276.512 0 500.669-224.06 500.669-500.448 0-276.391-224.157-500.448-500.67-500.448m0 0c-8.718 0-17.382.223-25.991.663"/>       <g transform="translate(-1 165.57)">         <mask id="d" fill="#fff"><use xlink:href="#c"/></mask>         <path stroke="#FFF" stroke-dasharray="11.105,11.105" stroke-width=".5" d="M369.836 1.304C156.789 51.536-3.724 237.79-14.945 463.334" mask="url(#d)"/>       </g>       <g transform="translate(-1 689.413)">         <mask id="f" fill="#fff"><use xlink:href="#e"/></mask>         <path stroke="#FFF" stroke-dasharray="10.749,10.749" stroke-width=".5" d="M-14.248 1.462c16.943 233.875 194.58 423.21 423.06 458.185" mask="url(#f)"/>       </g>       <g transform="translate(-1 158.737)">         <mask id="h" fill="#fff"><use xlink:href="#g"/></mask>         <path stroke="#FFF" stroke-width=".5" d="M407.057.845c-4.173.653-8.33 1.36-12.468 2.115M-15.416 482.803a518.625 518.625 0 0 0-.01 24.885M420.933 992.03c4.038.515 8.092.984 12.16 1.408" mask="url(#h)"/>       </g>       <g transform="translate(-1 151.904)">         <mask id="j" fill="#fff"><use xlink:href="#i"/></mask>         <path stroke="#FFF" stroke-width=".5" d="M459.137 1002.287c8.598.44 17.253.663 25.96.663M485.017.603h-1017.43M487.069 1002.845H-530.362" mask="url(#j)"/>       </g>       <g transform="translate(-1 766.85)">         <mask id="l" fill="#fff"><use xlink:href="#k"/></mask>         <path stroke="#FFF" stroke-width=".5" d="M1140.636 31.435H-553.453m1694.09-30.23v60.46m0 148.91h-1694.09m1694.09-30.23v60.461m0 148.913h-1694.09m1694.09-30.23v60.46m0 148.91h-1694.09m1694.09-30.23v60.461m0 148.91h-1694.09m1694.09-30.23v60.46m0 148.911h-1694.09m1694.09-30.23v60.461m0 148.911h-1694.09m1694.09-30.23v60.46" mask="url(#l)"/>       </g>     </g>   </svg>

HTML för att sätta bakgrundsbild

Här är exempel på hur bilden kan sättas som bakgrund. Denna svg är särskilt lämpad eftersom den har preserveAspectRatio="xMidYMid slice" och en viewBox.

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Page title</title>   <style>     body {       margin: 0;       min-height: 100vh;       background-image: url('bg-svg.svg');       background-size: cover;       background-position: center;       background-repeat: no-repeat;       background-attachment: fixed; /* optional: keeps it fixed while scrolling */     }   </style> </head> <body>   <!-- your content here --> </body> </html>