10. Hva er en piksel?
PPI (Pixels Per Inch) er måleenheten for piksler og angir piksler langs
en tomme bred linje (2,54 cm)
En piksel i et bilde tilsvare en piksel på skjermen, og hver piksel
representerer et fargepunkt.
En piksel har ingen fysisk fast størrelse, så en piksel vil bli mindre ved
en høyere PPI – og motsatt.
13. Hva er den optimale løsningen?
For å få en optimal oppløsning, er du avhengig av flere faktorer.
Tiden det tar å laste nettsiden, datakapasitet, samt avstanden vi
betrakter motivet fra, er blant de viktigste.
På nett brukes 72dpi som en tommelfingerregel
Lag bilder for web i 100% størrelse
15. Hexadesimaler
# Definerer at dette er farge
0 Definerer rødfarge
R Tilsvarer RGB-verdien 3
3
#0369CF 6 Definerer grønnfarge
G Tilsvarer RGB-verdien 105
9
C Definerer blåfarge
B Tilsvarer RGB-verdien 207
F
21. Cascading Style Sheets (CSS)
Et språk som brukes til å definere oppsett, farger og annen
stilinformasjon i HTML filer
Ved å endre på en CSS fil, kan man endre fargebruk, bakgrunnsbilder
osv. i alle dokumenter som peker til filen.
22.
23.
24.
25.
26.
27. Logg inn Sølvberget A-Å Åpningstider Kontakt oss
Ressursfelt
ALEPH
Søk
Aktivitets Tips/Anbefaling
kalender
www.stavanger-kulturhus.no
Spør Biblioteket
Arkiv
Aktuelt
Stavager
Sølvberget Bibliotek Kulturtorget Kapittel Andre avdelinger
Gjestfrihetens Aktuelt
kunster Om biblioteket Kino1
ICORN
Tidligere Norsk
Organisasjon Tjenester utstillinger Barnemuseum
Nettverk Barnas
Ansatte Barn og ungdom Kulturverksted
Utleie Skole KultKafeen
Presse/media Skjønnlitteratur SåkkoBokko
Faglitteratur Billettluka
Musikk og film Deadline
Avis/Tidsskrift
28.
29. Sølvberget
Stavanger kulturhus
Nytt nettsted
Hovedfarger Støttefarger
Farger #FF9900
De ulike grafiske toppene #DACFCE
preges av fargegradering for #CC3300
å skape dybde i skjermbildet.
Friske, klare farger er valgt
for å skape et tydelig skille
#88BB00
mellom de ulike “avdelin-
gene” samt fremheve logo #5B4350
og navigasjon på nettstedet. #005522
Fargene skal også definere
lenkenes tilhørighet på siten.
#0099CC
#A28D9A
#003366
#660066
#330033
30. Sølvberget
Stavanger kulturhus
Nytt nettsted
Fonter Heading 1 Meny Lenker Orange
Font: Georgia Font: Arial Font: Bold
Arial og Georgia er valgt som Size: 20 px Weight: Bold Color: #CC3300
hovedfonter til nettsiden, Lineheigth: 26 px Size: 10 px
en kombinasjon av serif og
Variant: Small-caps
sans-serif. Georgia gir oss en
Color: #FFFFFF/#333333
Lenker Green
assosiasjon til bokskrift. Font: Bold
Color: #88BB00
Det er viktig å følge Heading 2 Ingress
spesifikasjoner for Font: Arial Font: Georgia
linjeavstand, fargertoner
og mål for å oppnå best
Weight: Bold Style: Italic Lenker Blue
mulig lebarhet. Size: 14 px Size: 14 px Font: Bold
Lineheigth: 18 px Lineheigth: 18 px Color: #0099CC
Header Brødtekst Mouseover
Font: Arial Font: Arial Decoration: Underline
Weight: Bold Size: 12 px
Size: 11 px Lineheigth: 16 px
Variant: Small-caps
31. Sølvberget
http://www.stavanger-kulturhus.no
Stavanger kulturhus
Nytt nettsted
Forside
Forsiden holder stort fokus
på det som skjer på huset. En
flashfil med roterende bilder
presenteres i front.
Den grafisk toppen
formidler profil i form og
farger. Holder nettsted og
informasjon på plass.
Et strengt spalteoppsett
skal gi en god oversikt
over innholdet.
32. Sølvberget
http://www.stavanger-kulturhus.no
Stavanger kulturhus
Nytt nettsted
Forside
Mål for marger. Viktig at
disse følges nøyaktig.
MENY
Bakgrunnen i hovedmenyen
er 30% hvit når den er valgt
og 15% når den ikke er valgt.
Undermenyen er #ECEBEB
og hvit.
33. Sølvberget
http://www.stavanger-kulturhus.no
Stavanger kulturhus
Nytt nettsted
Kategori
Sølvberget, Biblioteket og
Kulturtorget har sine forsid-
er. Sølvberget er overordnet.
Dette eksempel viser
hvordan en ekspandert meny
kan se ut.
34. Sølvberget
http://www.stavanger-kulturhus.no
Stavanger kulturhus
Nytt nettsted
Artikkel
Midtfeltet brukes til
hovedinformasjon.
Bilder, relaterte lenker og
annen informasjon plasseres
alltid i høyre spalte.
Dette er viktig for å gi et
ryddig og oversiktlig bilde.
35. Sølvberget
http://www.stavanger-kulturhus.no
Stavanger kulturhus
Nytt nettsted
Søkeside
Stavanger Bibliotek bruker
systemet ALEPH som
database.
Dette skal presenteres som
en iframe løsning.
36. Sølvberget
http://www.stavanger-kulturhus.no
Stavanger kulturhus
Nytt nettsted
Kalender
Et eksempel på kalen-
der-oversikt. Denne bør
utvikles nøye slik at den
fungerer riktig.
38. Design for skjerm
Målet er ikke å navigere rundt på nettsiden. Målet er å oppnå noe.
Design selve innholdet – ikke bare lag pynt rundt.
Design enkelt. Tenk helhet og konsept
Hold fokus på gode brukeropplevelser. Koster mer å miste brukere
enn å investere i brukere
Design følelsen av et nettsted
