Introduksjonskurs iweb design 3.0Pixel perfectCSS - Farger/Fonter   Are SlevelandDesign                VJU Brand and Busin...
768 px1024 px
960x600 px
1920x1280px               1680x1050px              1366x768 px               1280x760 px1280x960 px                  1024x...
Dagen idag1. Pixel perfect2. CSS - Farger og fonter3. Overlevering av nettside4. Design
Punkter,dotter,prikker ogpiksler
Hva er en piksel?PPI (Pixels Per Inch) er måleenheten for piksler og angir piksler langsen tomme bred linje (2,54 cm)En pi...
2,54 cm    2,54 cmiPhone 3   iPhone 4
Hva er den optimale løsningen?For å få en optimal oppløsning, er du avhengig av flere faktorer.Tiden det tar å laste netts...
Fargerforweb
Hexadesimaler               #       Definerer at dette er farge           0           Definerer rødfarge                   R...
Web sikre farger #CC0000      #FF8800   #000000  #C00         #F80      #000
Love Helvetica
Cascading Style Sheets (CSS)Et språk som brukes til å definere oppsett, farger og annenstilinformasjon i HTML filerVed å e...
Logg inn       Sølvberget A-Å            Åpningstider          Kontakt oss                                                ...
SølvbergetStavanger kulturhusNytt nettsted                                    Hovedfarger         Støttefarger   Farger   ...
SølvbergetStavanger kulturhusNytt nettsted   Fonter                           Heading 1             Meny                  ...
Sølvberget                                   http://www.stavanger-kulturhus.noStavanger kulturhusNytt nettsted   Forside  ...
Sølvberget                                   http://www.stavanger-kulturhus.noStavanger kulturhusNytt nettsted   Forside  ...
Sølvberget                                   http://www.stavanger-kulturhus.noStavanger kulturhusNytt nettsted   Kategori ...
Sølvberget                                  http://www.stavanger-kulturhus.noStavanger kulturhusNytt nettsted   Artikkel  ...
Sølvberget                                http://www.stavanger-kulturhus.noStavanger kulturhusNytt nettsted   Søkeside   S...
Sølvberget                               http://www.stavanger-kulturhus.noStavanger kulturhusNytt nettsted   Kalender   Et...
God designløser oppgaver, påvirker     og skaper verdi
Design for skjermMålet er ikke å navigere rundt på nettsiden. Målet er å oppnå noe.Design selve innholdet – ikke bare lag ...
Brukeren
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
×

NKF web design 3

132

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
132
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

NKF web design 3

  1. 1. Introduksjonskurs iweb design 3.0Pixel perfectCSS - Farger/Fonter Are SlevelandDesign VJU Brand and Business Innovation
  2. 2. 768 px1024 px
  3. 3. 960x600 px
  4. 4. 1920x1280px 1680x1050px 1366x768 px 1280x760 px1280x960 px 1024x768 px1024x768 px 800x600px 960x640 px
  5. 5. Dagen idag1. Pixel perfect2. CSS - Farger og fonter3. Overlevering av nettside4. Design
  6. 6. Punkter,dotter,prikker ogpiksler
  7. 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. 8. 2,54 cm 2,54 cmiPhone 3 iPhone 4
  9. 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. 10. Fargerforweb
  11. 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. 12. Web sikre farger #CC0000 #FF8800 #000000 #C00 #F80 #000
  13. 13. Love Helvetica
  14. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. God designløser oppgaver, påvirker og skaper verdi
  25. 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. 26. Brukeren
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×