Designfundament

Friytan skapar den nödvändiga luft en logotyp behöver, speciellt när den samexisterar med många grafiska element på en begränsad yta i digitala gränssnitt.

I grunden har vi definierat friytan till densamma som logotypens höjd. Med fördel kan logotypen ges ytterligare friyta där så är möjligt.

 

Logotypens normala friyta

 

Exempel logotypapplicering

 

I speciella fall, på begränsade ytor som exempelvis i mobila gränssnitt, kan vi tillåta att avkall görs på grundprincipen för friyta. Men under inga omständigheter kan vi ha en friyta som understiger halva vertikala höjden av logotypen.

Logotypens minsta tillåtna friyta

 

Exempel logotypapplicering, mobil

 

Logotypen skall i möjligaste mån vara i färg och mot vit bakgrund. Det finns dock tillfällen då vi vill använda oss av en bildbakgrund och då använder vi logotypen enfärgad.

 

Använd aldrig logotypen i sitt ursprungsutförande mot bakgrunder av fotokaraktär. Sträva alltid efter att använda logotypen i sv/v mot bildbakgrund. För mörkare bakgrunder, välj vit logotyp. För ljusare bakgrund, välj svart logotyp. Det viktiga är att välj logotyp med maximal kontrast mot bakgrunden.

 

I grunden är gridden ett 12-kolumnsystem med bredder definierade som förhållanden (dvs procentandelar av skärmens bredd) med gutter med fast storlek för att hålla den visuella rytmen förenlig med typografi.

Gridsystem desktop + marginaler

 

Gridsystemets brytpunkter

 

Alla våra webbsidor är uppbyggda enligt Bootstraps gridsystem, vilket möjliggör en effektiv responsiv upplevelse på 5 huvudsakliga brytpunkter:

• Desktop (XL) - över 1200 px
• Desktop (L) - mellan 992 och 1199 px
• Tablet (M) - mellan 768 och 991 px
• Mobil (S) under 767 px
• Mobil (XS) under 480 px

Varje brytpunkt har storleksregler för gutter och kolumner.

 

Gridsystem desktop + marginal

 

Gridsystem mobil

I digitala kanaler används bara Helvetica Neue i två vikter, Regular och Medium vilka ni kan se nedan.

Helvetica Neue Medium används främst till rubriker men används även till viss annan text där man vill önskar en kraftiga visuell vikt såsom textbaserad call-to-actions, länkar och formulär. Helvetica Neue Regular används främst som en text-vikt.

Utöver detta används typsnittet Huggable men endast i Flajt-sammanhang.

 

Responsiva storlekar

Då digital kommunikation sker på olika plattformar, såsom exempelvis datorer, surfplattor, mobiler - alla med olika skärmstorlekar, skärmproportioner, upplösning och pixeldensitet krävs en responsiv designlösning, dvs en lösning som formar och skalar om sig beroende på specifik plattform. Konsekvensen av detta är att det finns olika typografiska storlekar och radavstånd för olika plattformar.

Swedavias responsiva typografiska värld är indelad i tre olika storlekar.

1. Desktop, dvs stationära datorer med en horisontell upplösning på över 1200 pixlar
2. Tablet, med en horisontell upplösning på över 768 pixlar
3. Mobil, med en horisontell upplösning på över 320 pixlar

 

 

Typografiska storlekar, översikt

Notera, Typografiska storlekar beskrivs XX/XX där första siffran indikerar storleken och andra siffran radavståndet.

 

 

Stilprover, desktop

 

 

Stilprover, tablet

 

 

Stilprover, mobil

 

Textbredder och radavstånd

För att en text ska bli så lättläst som möjligt krävs att det läsaren lätt kan följa den aktuella raden samt hitta ner till början av nästa rad. Detta förhållande styrs genom radlängder och dess radavstånd, dvs avståndet mellan raderna av text. En bra tumregel för tryckt typografi är att radlängder bör vara någonstans mellan 40-75 tecken långa, inklusive ordmellanrum och skiljetecken, komma, punkt, mellanslag, osv. I normala fall vill man ofta att radavståndet mellan rader av text är ett par punkter/pixlar större än textstorleken.

Dock, på skärm, som kan variera i bredd och som kanske också upplevs som en mer svårläst yta får man ofta utgå från en mer flexibel inställning. Textbredder bör givetvis inte vara för smala, eller breda i förhållande till satsytan och därför upptar huvudinnehållet på Swedavia sajten ungefär 2/3 av den totala satsytan. För att ytterligare underlätta läsningen används en brödtextstorlek 16 punkter med 21 punkters radvstånd, dvs något generösare än i tryck vad gäller både storlek på text och radavstånd.

 

Korrekt utnyttjande av satsyta

 

Inkorrekt utnyttjande av satsyta

 

Gemensamt för dem är att de alla är framtagna för att underlätta läsningen och förståelsen av sidan samt kunna möta tillgänglighetskrav vad gäller färg och kontrastverkan.

Färginformationstexten på varje platta indikerar även vilken färg av text som skall användas på respektive färg från ett färg och kontrastperspektiv. En guide kring tillgänglighet från ett färg och kontrastperspeltiv diskuteras mer detaljerat längre ner i detta kapitel.

 

Primärfärger

Primärfärgerna är de som ska används i störst utsträckning men är även de som tydligast kommunicerar Swedavias identitet.

 

Sekundärfärger

Sekundärfärgerna skall ses som stöd till primärfärgerna och har olika syften såsom exempelvis att kunna tydligöra specifikt innehåll, fungera som textfärg, länkfärg, eller interaktionssignalfärg i knappar.

 

Accentfärger

Accentfärger används som ett komplement till övriga färger och används mer sparsamt än övriga färger.

 

Bakgrundsfärger

Generellt används vitt som dominerande färg vad gäller bakgrundsfärg - så till den grad att man kanske inte ens uppfattar den som en färg. Därför fokuserar vi på de andra bakgrundsfärgerna som används digitalt. Dessa färger är valda för dess olika funktioner att synliggöra och tydliggöra innehåll.

 

Applicering av färg på bakgrund

Vit är grundfärgen och övrig färg används för att tydliggöra och synliggöra innehåll. Färg måste tydligt kontrastera vilket kräver att olikfärgade bakgrunder måste separeras med vita ytor, eller vara tillräckligt olika i mättnad och kontrast.

 

Korrekta appliceringsexempel

 

Icke korrekta appliceringsexempel

 

Färg och kontrastverkan

För att kunna möta tillgänglighetskrav måste färg och kontrastverkan vara tillräckligt hög för att användare med synnedsättning ska kunna läsa text. Synlighet kan utöver skillnaden i färg mot objekt och grund, samt kontrasten däremellan, också förbättras med storlek på text.

Swedavia följer dessa tillgänglighetsprinciper och därav är den mesta texten/typografin, i olika mörka nyanser av svart, mörkgrått och blått på vitt, eller andra mycket ljusa bakgrunder. Det motsatta förhållandet som orange och vitt på trafikalblått är också optimerat för lämplig färg och kontrastverkan.

Kortfattat måste färg- och kontrastskillnaderna vara tillräckligt stora för att lösningen ska möta tillgänglighetskraven och det finns webbaserade verktyg för att säkerställa att valda färger fungerar från detta perspektivet, exempelvis.

juicystudio.com/services/luminositycontrastratio.php
webaim.org/resources/contrastchecker
abc.useallfive.com/

För något mer avancerad kontroll, bland annat med förslag på lämpligare färger.
contrast-finder.tanaguru.com

 

Färg och kontrastverkan, typografi

Som i exemplen ovan behöver typografi vara i en lämplig färg baserat på bakgrunden den appliceras på. Nedan följer några exepel på korrekt samt mindre korrekta val. I övrigt konsultera information ovan.

Länkfärg

Alla textlänkar skall vara i länkfärgsblå, #0A7CAC. Denna är lik den klarblå men är specifikt framtagen för att möta färg och kontrastkrav från ett tillgänglighetsperspektiv.

Länkexempel
swedavia.se/framtidensflygplatser

 

Innehållstext och rubriker

Som i exemplen ovan behöver typografi vara i en lämplig färg baserat på bakgrunden den appliceras på. Nedan följer några exepel på korrekt samt mindre korrekta val. I övrigt konsultera information ovan.

Utöver detta kan, i vissa fall, som exempelvis kampanjrubriker vara i en annan färg. Dessa färger måste dock möta tillgänglihetskraven för färg och kontrast. Några lämplia och olämpliga exempel nedan.

 

Flygstatus

För negativ flygstatus används en klar röd färg, #D0011B. Övrig statusinformation hanteras enligt befintligt färgschema.

Dessa typer av gränssnittsikoner ska ej förväxlas med skyltmanualens symboler eller vårt illustrationsmanér även fast grundformerna följer samma priciper.
Detta främst eftersom dessa ikoner ska kunna skala ned till små storlekar (16px) samtidigt som dess tydlighet ska bibehållas.

 

Befintliga gränssnittsikoner

Det befintliga biblioteket innefattar de viktigaste och mest använda ikonerna.

Färgställningar

Ikonerna ska primärt användas i trafikalblå/svart eller vit beroende på bakgrundsfärg.
I vissa fall kan vi använda färg på dem för att ytterligare förstärka en interaktion eller pålysa information.