nkf web design 3
TRANSCRIPT
![Page 1: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/1.jpg)
Introduksjonskurs iweb design 3.0
Pixel perfectCSS - Farger/FonterDesign
Are SlevelandVJU Brand and Business Innovation
![Page 2: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/2.jpg)
![Page 3: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/3.jpg)
1024 px
768 px
![Page 4: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/4.jpg)
960x600 px
![Page 5: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/5.jpg)
1280x960 px1024x768 px800x600px
1920x1280px1680x1050px
1366x768 px1280x760 px
1024x768 px
960x640 px
![Page 6: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/6.jpg)
![Page 7: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/7.jpg)
![Page 8: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/8.jpg)
Dagen idag
1. Pixel perfect2. CSS - Farger og fonter3. Overlevering av nettside4. Design
![Page 9: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/9.jpg)
Punkter,dotter,prikker ogpiksler
![Page 10: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/10.jpg)
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.
![Page 11: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/11.jpg)
2,54 cm 2,54 cm
iPhone 3 iPhone 4
![Page 12: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/12.jpg)
![Page 13: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/13.jpg)
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
![Page 14: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/14.jpg)
Fargerforweb
![Page 15: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/15.jpg)
Hexadesimaler
#0369CF
## Definerer at dette er farge
#0369CF
0R Definerer rødfarge
Tilsvarer RGB-verdien 3
#0369CF
3R Definerer rødfarge
Tilsvarer RGB-verdien 3
#0369CF 6G Definerer grønnfarge
Tilsvarer RGB-verdien 105
#0369CF
9G Definerer grønnfarge
Tilsvarer RGB-verdien 105
#0369CF
CB Definerer blåfarge
Tilsvarer RGB-verdien 207
#0369CF
FB Definerer blåfarge
Tilsvarer RGB-verdien 207
![Page 16: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/16.jpg)
#CC0000 #FF8800 #000000
#C00 #F80 #000
Web sikre farger
![Page 17: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/17.jpg)
![Page 18: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/18.jpg)
Love Helvetica
![Page 19: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/19.jpg)
![Page 20: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/20.jpg)
![Page 21: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/21.jpg)
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.
![Page 22: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/22.jpg)
![Page 23: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/23.jpg)
![Page 25: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/25.jpg)
![Page 26: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/26.jpg)
![Page 27: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/27.jpg)
www.stavanger-kulturhus.no
Sølvberget StavagerBibliotek Kulturtorget Andre avdelinger
Gjestfrihetenskunster
Organisasjon
Ansatte
Utleie
Om biblioteket
Tjenester
Barn og ungdom
Skole
Kino1
NorskBarnemuseum
BarnasKulturverksted
KultKafeen
SåkkoBokko
Billettluka
Deadline
Aktuelt
Tidligereutstillinger
Nettverk
Sølvberget A-Å Åpningstider Kontakt oss
Aktivitetskalender
Logg innALEPH
SkjønnlitteraturPresse/media
Avis/Tidsskrift
Ressursfelt
Søk
Tips/Anbefaling
Spør Biblioteket
Arkiv
ICORN
Kapittel
Faglitteratur
Musikk og film
Aktuelt
![Page 28: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/28.jpg)
![Page 29: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/29.jpg)
SølvbergetStavanger kulturhusNytt nettsted
Farger
De ulike grafiske toppene preges av fargegradering for å skape dybde i skjermbildet.
Friske, klare farger er valgt for å skape et tydelig skille mellom de ulike “avdelin-gene” samt fremheve logo og navigasjon på nettstedet.Fargene skal også definere lenkenes tilhørighet på siten.
#FF9900
#CC3300#DACFCE
#5B4350
#A28D9A
Hovedfarger
#88BB00
#005522
#0099CC
#003366
Støttefarger
#660066
#330033
![Page 30: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/30.jpg)
SølvbergetStavanger kulturhusNytt nettsted
Fonter
Arial og Georgia er valgt som hovedfonter til nettsiden, en kombinasjon av serif og sans-serif. Georgia gir oss en assosiasjon til bokskrift.
Det er viktig å følge spesifikasjoner for linjeavstand, fargertoner og mål for å oppnå best mulig lebarhet.
Heading 1Font: GeorgiaSize: 20 pxLineheigth: 26 px
Heading 2Font: ArialWeight: BoldSize: 14 pxLineheigth: 18 px
HeaderFont: ArialWeight: BoldSize: 11 pxVariant: Small-caps
IngressFont: GeorgiaStyle: ItalicSize: 14 pxLineheigth: 18 px
BrødtekstFont: ArialSize: 12 pxLineheigth: 16 px
Lenker OrangeFont: BoldColor: #CC3300
Lenker GreenFont: BoldColor: #88BB00
Lenker BlueFont: BoldColor: #0099CC
MouseoverDecoration: Underline
MenyFont: ArialWeight: BoldSize: 10 pxVariant: Small-capsColor: #FFFFFF/#333333
![Page 31: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/31.jpg)
SølvbergetStavanger kulturhusNytt nettsted
http://www.stavanger-kulturhus.no
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.
![Page 32: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/32.jpg)
SølvbergetStavanger kulturhusNytt nettsted
http://www.stavanger-kulturhus.no
Forside
Mål for marger. Viktig at disse følges nøyaktig.
MENYBakgrunnen i hovedmenyen er 30% hvit når den er valgt og 15% når den ikke er valgt.
Undermenyen er #ECEBEB og hvit.
![Page 33: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/33.jpg)
SølvbergetStavanger kulturhusNytt nettsted
http://www.stavanger-kulturhus.no
Kategori
Sølvberget, Biblioteket og Kulturtorget har sine forsid-er. Sølvberget er overordnet.
Dette eksempel viser hvordan en ekspandert meny kan se ut.
![Page 34: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/34.jpg)
SølvbergetStavanger kulturhusNytt nettsted
http://www.stavanger-kulturhus.no
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.
![Page 35: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/35.jpg)
SølvbergetStavanger kulturhusNytt nettsted
http://www.stavanger-kulturhus.no
Søkeside
Stavanger Bibliotek bruker systemet ALEPH som database.
Dette skal presenteres som en iframe løsning.
![Page 36: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/36.jpg)
SølvbergetStavanger kulturhusNytt nettsted
http://www.stavanger-kulturhus.no
Kalender
Et eksempel på kalen-der-oversikt. Denne bør utvikles nøye slik at den fungerer riktig.
![Page 37: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/37.jpg)
God designløser oppgaver, påvirker
og skaper verdi
![Page 38: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/38.jpg)
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
![Page 39: NKF web design 3](https://reader034.vdocuments.us/reader034/viewer/2022052622/55956b411a28ab242c8b47ac/html5/thumbnails/39.jpg)
Brukeren