Grafisk manual
Örebro intranät 2011
Innehåll
Sidstruktur och layout . . . . . . . . . . . . . . . . . . . . . . 3
Sidhuvud och huvudmeny. . . . . . . . . . . . . . . . . . . 6
Färger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Bilder startsida. . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Typografi. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Ikoner. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Undersida, fyra varianter. . . . . . . . . . . . . . . . . . . 13
Varningsruta . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
B 1014px
H 117px
26px
18px
1.
25px
18px
2
3.
Layout startsida
Örebro intranäts webbplats är designad
för upplösning 1024 x 768 pixlar. Layouten är uppbyggd på en grid med tre
kolumner. På startsidan är kolumnerna
lika breda.
1.Vänsterkolumn med nyheter.
2. Mittenkolumn med genvägar och informationsrutor (widgetar)
3. Högerkolumn med statusuppdateringar.
Huvudmenyn och sidfoten sträcker sig
över alla kolumner och har alltid samma
proportioner.
B 308px
B 308px
B 308px
45px
B 1014 px
H 130px
3
26px
18px
18px
25px
Layout undersida
Skillnaden från startsidan är att mittenkolumnen med artikelinnehållet är
bredare. Vänsterkolumnen med menyn
och högerkolumnen med funktioner
är smalare. Alla övriga marginaler är
oförändrade.
B 220px
B 486px
B 220px
45px
4
34px
Menyraden ligger kvar
vid scroll
När sidan scrollas försvinner övre delen
av sidhuvudet medan huvudmenyraden
låses i toppen. Sidans innehåll scrollas
sedan under huvudmenyraden.
5
Sidhuvudet i sin ursprungsform
Megameny utfält
Sidhuvud och huvudmeny
Sidhuvudet består av två delar. Den
övre med Örebro kommuns logotyp, citat
samt inloggningsinformation. Den nedre
innehåller huvudmenyn och ett sökfält.
Ett klick i huvudmenyn vecklar ut en
megameny med menynivå två och tre.
När sidan scrollas försvinner den övre
delen av sidhuvudet men huvudmenyn stannar kvar högst upp.
Användaren har på så sätt huvudmenyn
och sökfältet alltid tillgänglig.
Sidhuvudet vid scroll
6
Huvudfärgen Blå
RGB 0 / 75 / 127
# 004b7f
RGB 0 / 112 / 189
# 0070BD
Kontrastfärger
RGB 239 / 125 / 26
# EF7D1A
RGB 193 / 39 / 45
# C1272D
RGB 189 / 204 / 212
# BDCCD4
RGB 179 / 94 / 20
# B35E14
RGB 209 / 229 / 242
#D1E5F2
RGB 232 / 227 / 223
# E8E3DF
Gråskala
RGB 0 / 0 / 0
# 000000
RGB 51 / 51 / 51
# 333333
RGB 102 / 102 / 102
# 666666
Färger
Sidans huvudfärg är blå i olika nyanser.
Den sträcker sig från den mörka, kontrastrika färgen i huvudmenyn till den riktigt ljusblå gradienten i alla widgetfönster.
Blå symboliserar även klickbarhet då alla
länkar och de flesta ikoner är blå.
Kontrasfärger används för att lyfta fram
ett element t ex rubriker och aktiva
menyalternativ.
Gråskalan används främst till text och
rubriker.
RGB 212 / 234 / 252
# D4EAFC
7
Arial
Typografi
Sidan använder nästan uteslutande
typsnitten Arial för brödtext och menyer
samt Georgia för rubriker. Både Arial och
Georgia är designade för skärmvisning, de har bra kontrast och fungerar
väl även i små storlekar.
I sidhuvudet finns två undantag: titeln
“intranät” är skriven i Tahoma och citatet
i Adobe Caslon Pro, Bold Italic. Anledningen är att de ska skilja sig från resten av
innehållet.
Georgia
8
Statusbild
B 32px H 32px
Runda hörn 4px
Huvudnyhet
B 308px
H 180px
Nyhetsbild stående
B 80px
H 118px
Profilbild
B 52px H 52px
Runda hörn 4px
Mouse over
Arial 10pt
Bilder startsida
Bildena används sparsamt på startsidan
för att hålla den ren och tydlig. De viktigaste nyheterna visas i karusellen med
en stor bild och rubrik.
Övriga nyhter kan ha en stående eller
en liggande bild. Bilderna har samma
proportioner för att hålla nere antal olika
bildformat.
Nyhetsbild stående
B 80px
H 118px
9
“intranät”
Tahoma Bold 39pt
Citat
Adobe Caslon Pro
Bold Italic 20pt
Länkar
Arial 12pt
Inloggad
Arial Bold 12pt
Huvudmeny
Arial Bold 13pt
Widgetrubrik
Georgia Bold 12pt
Bildspel
Arial Bold 14pt
Nyhetsrubrik
Georgia Bold 16pt
Mouse over
Arial 10pt
Typografi startsida
Arial och Georgia används i många olika
storlekar, vikter och färger för att underlätta orientering på sidan och skapa en
typografisk hierarki. Hierarkin hjälper till
att sortera information, från stora viktiga
rubriker till liten och grå bildtext.
Brödtext
Arial 12pt
Tagg
Arial Bold 9pt
Datum
Arial 11pt
Brödtext
Arial 12pt
Sidfot rubrik
Georgia Bild 15pt
Sidfot länkar
Arial 11pt
10
Vänstermeny aktiv
Arial 12pt
# B35E14
Datum
Arial 11pt
Huvudrubrik
Georgia 36pt
Länkstig
Arial 10pt
Vänstermeny
Rubrik
Georgia Bold 14pt
Vänstermeny
Arial 12pt
Mellanrubrik
Georgia Bold 18pt
Brödtext
Arial 13pt
Radavstånd 18pt
Underrubrik
Georgia Bold 14pt
Funktioner
Arial 12pt
Typografi undersida och
vänstermenyn
Vänstermenyn på en undersida är helt
textbaserad. Överst är en menyrubrik
(nivå2) som inte är klickbar. Under följer
nivå 3 och upp till nivå 6. Pilen till vänster
om ett menyalternativ indikerar att det
finns undernivåer. Pilen pekar neråt när
menyn är expanderad. Finns inga undernivåer byts pilen ut mot en boll.
Brödtext lista
Vänster indrag 10pt
Avstånd efter 4pt
11
Inloggning
max 18 x 18px
#0071BC
Ikoner och länkar
Ikoner används sparsamt på sidan och
varierar lite i syfte och utseende.
Inloggningsikonerna och sök är alltid blå.
Widget- och artikelikoner är grå och blir
blå vid mouse over. Två ikoner har påoch av-läge. När de är aktiva ändrar de
färg till orange.
Widget
max 18 x 18px
#A5B3B7
Artikel
max 18 x 18px
Aktiva
#EF7D1A
Alla länkar är blå och blir understrukna
vid mouse over. En besökt länk änrar
färg till lila. Länken ska ha samma storlek som typsnittet i resten av stycket.
Navigering
max 18 x 18px
Arial # 0061AC
Vanlig textlänk
Arial understuken
# 0061AC
Vanlig textlänk (hoover)
Arial # 662D91
Vanlig textlänk (besökt)
12
Undersida utan bild
Det finns fyra varianter på hur en undersida kan se ut. Fördelen är att kunna
anpassa mallen efter olika typer av innehåll samt kunna variera utseendet för att
göra sidan med levande och dynamisk.
Här är undersida i sin rena form utan
någon bild.
13
Undersida stor bild
Stor bild
B 485px
H 285px
Stor bild med bildtext hamnar direkt under huvudrubriken och datumet. En stor
bild lättar upp den texttunga sidan och
ger en bra fingervisning om vad artikeln
handlar om. Den gör det även lättare att
komma ihåg artikeln. I övrigt behåller
sidan sin formatering.
14
Undersida liten stående bild
Liten vertikal bild
B 165px
H 230px
En mindre stående bild och bildtext
hamnar till höger om texten. Den placeras under huvudrubriken och datumet,
linjerad med ingressen och fortsätter
neråt.
15
Undersida liten liggande bild
Liten vertikal bild
B 230px
H 165px
En variant med en liggande bild. Den
har precis samma proportioner som den
stående bilden för att hålla nera antal
olika storleksvarianter.
16
Varningsruta
B 308px
H 195px
Rubrik
Georgia 22pt
Brödtext
Arial 12pt
Brödtext fet
Arial Bold 12pt
Varningsruta
Vid speciella akuta händelser visas en
“super alert”-ruta i stället för nyhetssnurran. Hela rutan är en länk till en
undersida med detaljbeskrivning av
situationen.
17