Your SlideShare is downloading. ×
0
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
NKF web design 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

NKF web design 3

124

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
124
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Introduksjonskurs iweb design 3.0Pixel perfectCSS - Farger/Fonter Are SlevelandDesign VJU Brand and Business Innovation
  2. 768 px1024 px
  3. 960x600 px
  4. 1920x1280px 1680x1050px 1366x768 px 1280x760 px1280x960 px 1024x768 px1024x768 px 800x600px 960x640 px
  5. Dagen idag1. Pixel perfect2. CSS - Farger og fonter3. Overlevering av nettside4. Design
  6. Punkter,dotter,prikker ogpiksler
  7. Hva er en piksel?PPI (Pixels Per Inch) er måleenheten for piksler og angir piksler langsen tomme bred linje (2,54 cm)En piksel i et bilde tilsvare en piksel på skjermen, og hver pikselrepresenterer et fargepunkt.En piksel har ingen fysisk fast størrelse, så en piksel vil bli mindre veden høyere PPI – og motsatt.
  8. 2,54 cm 2,54 cmiPhone 3 iPhone 4
  9. 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 vibetrakter motivet fra, er blant de viktigste.På nett brukes 72dpi som en tommelfingerregelLag bilder for web i 100% størrelse
  10. Fargerforweb
  11. 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
  12. Web sikre farger #CC0000 #FF8800 #000000 #C00 #F80 #000
  13. Love Helvetica
  14. Cascading Style Sheets (CSS)Et språk som brukes til å definere oppsett, farger og annenstilinformasjon i HTML filerVed å endre på en CSS fil, kan man endre fargebruk, bakgrunnsbilderosv. i alle dokumenter som peker til filen.
  15. 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 avdelingerGjestfrihetens Aktuelt kunster Om biblioteket Kino1 ICORN Tidligere NorskOrganisasjon Tjenester utstillinger Barnemuseum Nettverk Barnas Ansatte Barn og ungdom Kulturverksted Utleie Skole KultKafeenPresse/media Skjønnlitteratur SåkkoBokko Faglitteratur Billettluka Musikk og film Deadline Avis/Tidsskrift
  16. SølvbergetStavanger kulturhusNytt 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
  17. SølvbergetStavanger kulturhusNytt 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
  18. Sølvberget http://www.stavanger-kulturhus.noStavanger kulturhusNytt 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.
  19. Sølvberget http://www.stavanger-kulturhus.noStavanger kulturhusNytt 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.
  20. Sølvberget http://www.stavanger-kulturhus.noStavanger kulturhusNytt 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.
  21. Sølvberget http://www.stavanger-kulturhus.noStavanger kulturhusNytt 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.
  22. Sølvberget http://www.stavanger-kulturhus.noStavanger kulturhusNytt nettsted Søkeside Stavanger Bibliotek bruker systemet ALEPH som database. Dette skal presenteres som en iframe løsning.
  23. Sølvberget http://www.stavanger-kulturhus.noStavanger kulturhusNytt nettsted Kalender Et eksempel på kalen- der-oversikt. Denne bør utvikles nøye slik at den fungerer riktig.
  24. God designløser oppgaver, påvirker og skaper verdi
  25. Design for skjermMå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 konseptHold fokus på gode brukeropplevelser. Koster mer å miste brukereenn å investere i brukereDesign følelsen av et nettsted
  26. Brukeren

×