Designmönster för webb
Designmönster definierar aspekter av det digitala designsystemet, såsom hur vi hanterar teckensnitt, färger, animering och gridsystem. Dessa mönster är alla mer eller mindre närvarande när man designar samt utvecklar nya webbgränssnitt inom Swedavia.
Informationsdesign
Infografik
Infografik är information som kontextualiseras med hjälp av information och illustrationer från Swedavias former, illustrationer och mönster. Här kan fakta visualiseras med hjälp av illustrativa element, som visuellt stöd till faktabaserad information. Generellt kan man säga att visualiseringen kan skapa förståelse och tydlighet, dock är fokus visuellt kanske mer på upplevelsen av informationen än dess exakthet vilket bör tas i beaktning skulle man ha behov av att vara helt specifik.
Exempel på infografik
Diagram och grafer
Utöver Swedavias infografik finns en grupp diagram och grafer framtagna för att kunna visualisera och kommunicera olika data-set. Nedan följer förklaringar av de olika typerna, hur de fungerar och när de används.
Stapeldiagram
Stapeldiagram används för att visa olika faktorers olika värden. Baserat på detta skall stapeldiagram användas när man vill göra jämförelser mellan olika faktorer. Grundformen för stapeldiagrammen utgår från Swedavias rundade streckform vilken är del av mönsterpaletten.
Exempel på stapeldiagram
Stolpdiagram
Stolpdiagram är en variant av stapeldiagram, och används för histogram. En stor skillnad mellan stolp-, och stapeldiagram är att det i stolpdiagram enbart förekommer tal som jämförs. Grundformen för stapeldiagrammen utgår även de från Swedavias rundade streckform vilken är del av mönsterpaletten.
Exempel på stolpdiagram
Linjediagram
Denna typ av diagram används ofta för att visa hur något förändras med tiden, det vill säga för att presentera värdet för en variabel över tid. I ett linjediagram kan man bland annat urskilja trender och jämföra data, genom att jämföra flera tidsserier (linjer) med varandra samtidigt.
Exempel på linjediagram
Ytdiagram
Ytdiagram är en liknande diagramtyp som linjediagram men här med överlappande eller staplade ytor.
Cirkeldiagram
Cirkeldiagram är en diagramtyp som med visar andelar av totalmängd. Ofta med procentsatser eller annan mängdinformation inskriven. Cirkeldiagram kan rekommenderas framför stapeldiagram när det inte finns en tydlig ordning mellan värdena, eller när summan av värdena utgör en helhet, exempelvis 100 %.
I Swedavias fall kan cirkeldiagram vara antingen en helfylld cirkel, eller med en öppen mittenyta.
Exempel på cirkeldiagram
Bild/video/illustrationer
Skillnad mellan bild och illustration
Den tydligaste distinktionen mellan bild och illustrationsanvändande är att bilder används primärt för att inspirera och i viss mån illustrera exempelvis en plats eller sak medan illustrationer används för att tydligt informera. Detta kan ta formen av informationsgrafik, eller i andra sammanhang där tydlighet efterfrågas som exempelvis vid förklaringar av exempelvis tjänster.
Exempel på bild och illustrationsanvändande
Bildtyper
Det finns tre olika bildtyper på Swedavia-sajten.
- Hero-bilder, bilder i toppen på sidor. Kan vara med eller utan rubrik/ingress
- Puffbild med rubrik, bilder med rubrik som fungerar som länk/knapp
- Vanlig Bild, bild som del av innehåll
Översikt hero-bilder
Hero-bilder är stämmningsbilder, de sätter tonen och kan även till viss del skapa förståelse av vilken sida användaren befinner sig på. Baserat på funktionen krävs det att dessa bilder är stämningsfulla, visuellt enkla och generella i sin natur. För detaljerade bilder, eller med detaljer längre ut i kanterna av bild skapar en ej önskvärd dynamik.
Exempel på Hero-bilder
Exempel på Puffbilder med rubrik
Puffbilder är bilder som både fungerar som indragare till ämnet/posten/artikeln men som även skapar en kontext åt användaren vilket underlättar förståelsen för innehållet. Dessa bilder kan i systemet visas i sin helhet men kan även beskäras mer detaljerat vid val av fokuspunkt i bildsystemet.
Exempel på vanliga bilder
Video
Video kan användas uppe i Hero-ytan eller inbäddad istället för bild där det är lämpligt. Oavsett plats skall all video vara i 16:9 format. Filer laddas upp i rätt format och vikt på You-tube, varifrån de sen bäddas in.
Hero-video
Format: 16x9
Encoder: H.264
Kompression: Mpeg4
Filstorlek: < 5Mb
Inbäddad video
Format: 16x9
Encoder: H.264
Kompression: Mpeg4
Illustration
Som tidigare nämnts används illustration för att kunna förmedla information. Hur man använder illustrationer finns väl beskrivet under Illustration och ränder samt i sektionen Informationsdesign.
Inputs
Formulärfält
För textinput är det formulärfält som gäller. Dessa ser något olika beronde på när inom interaktionskedjan en anvädare befinner sig. I Swedavias värld finns dessa fält i tre olika färger, en variant för ljus bakgrund, en för mörk bakgrund samt en färgad version.
Mörk bakgrund
Dropdown
Det finns två olika dropdown-menyer att tillgå, en för ljus, samt en för mörk bakgrund.
Datumväljare
Det finns en typ av datumväljare att tillgå.
Checkbox, radioknapp, toggleknapp
Checkboxar, radioknappar och toggleknappar finns i två olika versioner, en mer monokrom blå och vit version samt en färgversion.
Knappar och länkar
Ladda ned Xxxxxx_xxx_xxxx.sketch
Ladda ned Xxxxxx_xxxx.psd
Hämta kod
Informationsgrafik i print
Knappar
Det finns två knapptyper - standardknappar vilka är de som används primärt samt sekundärknappar vilka används precis som det låter, sekundärt i en interaktionskedja. Som exempel används sekundärknappen inne i en blocktyp där exempelvis en bild, eller rubrik, länkar till den primära platsen och sekundärknappen är en komplementlänk till en sekundär funktion.
Tillgänglighetskrav är en rådande princip inom Swedavias digitala värld och detta tydliggörs i arbetet med knappar. Val av färg på knapp och textfärg måste möta tillgänglighetskraven på färg och kontrast. Notera att detta gäller även för hover-states då färg ofta ändras både på knapp och text.
Då tydlig länkkommunikation är imperativ så är det textinnehållet som styr knappbredder.
Standardknapp
Sekundärknapp
Tabs
Det finns två typer av tabs - en fullbreddslösning och två varianter på en blocktypslösning. Skillnaden mellan dessa är att fullbreddslösningen ändrar allt innehåll på sidan under sig medan blocktypslösningen bara växlar innehåll inne i det specifika blocket. Vad gäller tillgänglighet, färgval, bredder och dylikt så gäller samma principer som för knappar.
Fullbreddstabs
Blocktypstab, friliggande
Blocktypstab, inverterad
Länkar
Det finns två länktyper. Länkar kan antingen vara inline-länkar, dvs länkar inne i text, eller fristående länkar. Inline-länkar har en underline som interaktionsmarkering och fristående länkar är blåfärgade.
Animationer
Animationsprincip
Det finns en anmationsprincip vilken all animation i Swedavias digitala kanaler ska följa ska följa. En mjuk rörelse med en kraftig initial acceleration och kvick följsam inbromsning. Ease In - Ease Out är ett vedertaget begrepp för detta . Nedan finns även en graf som beskriver rörelsen samt dess CSS-definition.
Även om själva rörelsemönstret är detsamma så bör reveal-hastigheten beaktas. Exempelvis så bör menyer animeras fram snabbare än generella innehållsanimeringar. Som en generell tumregel så bör animeringar upplevas som för kontexten normala. Upplevs något exempelvis för snabbt så är det säkert så. Animation skall helt enkelt inte sticka ut och märkas hos betraktaren utan bara kännas som en naturlig del av miljön.
De följande två exempel illustrerar denna grundprincip väl.
Vit megameny
Megamenyn är ett bra exempel på en snabbare animation/reveal. Som meny bör den givetvis synliggöras snabbt för att påvisa interaktionsmöjligheten samtidigt som en för långsam animation skulle upplevas störande och kanske även ifrågasätta om webbplatsen överhuvudtaget fungerade.
Toggleslider
Innehållsanimationen toggleslider rör sig givetvis långsammare än meny då det annars skulle blir för visuellt intensivt. Sammanhanget och uttrycket styr hastighet.
