Styleguide
För den intresserade återges här den styleguide som MOVSOM AB:s företagshemsida följer.
Typhierarkier
- teckenstorlek
-
Observera att rent visuellt har teckenstorleken ingen uppenbar koppling med vad du ser på skärmen eller ett papper. Istället är det höjden på den ”box” som typsnittet designats runt som avses. Det innebär att valet av teckenstorlek har baserats på typsnittet i fråga eftersom text satt med samma teckenstorlek men med olika typsnitt kan upplevas mycket olika.
(För den nyfikne bygger talsekvensen med teckenstorlekar på två fibonacci-sekvenser och ett par godtyckligt valda tal som passade bra ihop. Syftet har varit att begränsa antalet olika teckenstorlekar som används och säkerställa att dom som används verkligen fyller ett syfte.)
För att göra det lättare att läsa och förstå sidornas texter används några olika typhierarkier där främst teckenstorlek och typvariant varieras för att etablera hierarkier av text. Olika varianter av typsnittet Open Sans används genomgående för all text och har valts eftersom det passar in bra i sammanhanget och erbjuder många typvarianter.
Samtliga teckenstorlekar som används är baserade på följande talsekvens: 10, 13, 16, 18, 21, 26, 34, 42, och 55. Under förutsättning att webbläsaren som standard visar text med 16px teckenstorlek motsvarar detta även i px den teckenstorlek med vilken text digitalt sätts (används någon annan standardstorlek så kommer skalan ändras proportionellt).
Primär hierarki
Används för den huvudsakliga texten på en sida, en större artikel av något slag. Används oavsett om det rör sig om en whitepaper eller en beskrivning av en produkt eller tjänst.
eller känna till relevanta ISO-standarder
och mätprocessen (som helhet)
(med t-opening)
(med utmärkt inledande text då ingen rubrik finns, såsom för en faktaruta av något slag).
det är en del av hela utvecklingsprocessen.
Sekundär hierarki
Används när en starkt underordnad kontrast mot den primära hierarkin behövs. Till exempel för faktarutor ("asides") till en artikel. Men även för sidfötter ("footers") och namn på broschyrer som kan laddas ned eller liknande. Observera dock att beroende på situationen så kan det hända att det är mer lämpligt att använda sig av den primära hierarkins sekundära brödtext. (Observera att samma teckenstorlek används genomgående. Hierarkin etableras istället huvudsakligen genom att använda olika typvarianter.)
Mätutrustning
123 45 NÅGONSTANS
Navigationshierarki
- knappmeny
- Horisontella/vertikala grupperingar av knappar med syfte att navigera exempelvis en grupp undersektioner för en sektion.
Speciellt avsedd för huvudmenyn och dess undermenyer samt knappmenyer. Hierarkin gör det möjligt att framhäva tjänster och produkter på ett helt annat sätt i menyn än övriga sektioner framhävs, trorts att dom egentligen ligger på samma ”nivå” i informationshierarkin.
och mätutrustning.
CTA-hierarki
- cta
- "Call to actions", en situation där läsaren med all tydlighet uppmuntras att göra något, såsom att klicka på en knapp för att läsa mer.
- "hero-bild"
- Någon form av "bild" med text, ofta stor, som utformats för att dra till sig uppmärksamhet och som inkluderar en cta.
Speciellt avsedd för cta-situationer, såsom bildspel (”slideshow”) och "hero-bilder". Här är det viktigt att välja teckenstorlekar som ger bra kontrast mot den primära typhierarkin. Detta åstadkoms utan att välja en största teckenstorlek som är större än den största i den primära hierarkin, istället förutsätts att CTA-text visas i situationer med tydlig visuell utformning som i sig gör att typen framhävs som viktigare.
dagligen använder test- och
mätutrustning.
Övrig text
Specialfall som inte passar in i någon av de etablerade typhierarkierna. Dessa måste ändå relateras på ett eller annat sätt till de etablerade typhierarkierna, men har ingen uppenbar placering i någon av dem. Några av dessa specialfall används bara för en specifik text.
värderas högt av mig.
Färgschema
Ett grundläggande färgschema används av samtliga sidor som bestämmer bakgrundsfärg och förgrundsfärg för text och länkars olika tillstånd.
Plattor
(Syftet med plattor är att få kontroll över vilka färger som används och hur dom används.)
Det grundläggande färschemat utgör en ”basplatta” som ytterligare ”plattor” kan staplas ovanpå. Dessa plattor återanvänder eller komplementerar det grundläggande färgschemat och introducerar hierarkier av bakgrundsfärger, avgränsande linjer, ramar och nya färgval för text.
(med p-major--divider)
(med nästlad p-major__vertical-divider och p-major__horizontal-divider)
(med p-major--alternative-divider-before)
(med wrappande p-error-container)
(med p-cta--divider)
(med nästlad p-cta__feature)
Bubble
| Text | Text | Text | Text |
| Text | Text | Text | Text |
Text |
|||
| Text | Text | Text | Text |
| Text | Text | Text |
Text |
| Text | Text | Text | Text |
(med nästlad p-table__midrule, samt p-table__feature (med och utan p-table__feature--rounded)
Knappar
(Egentligen finns det bara en knapp med en enkel layout, men den kan visas i olika varianter som alla kan ha egna färgscheman.)
Knappar, liksom plattor, har fristående enkla färgscheman som relateras hierarkiskt till färgschemat för basplattan eller någon annan platta. Till skillnad från plattor etablerar knappar dock en mindre layout.