Transcript
Introduksjonskurs iweb design 3.0
Pixel perfectCSS - Farger/FonterDesign
Are SlevelandVJU Brand and Business Innovation
1024 px
768 px
960x600 px
1280x960 px1024x768 px800x600px
1920x1280px1680x1050px
1366x768 px1280x760 px
1024x768 px
960x640 px
Dagen idag
1. 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 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.
2,54 cm 2,54 cm
iPhone 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 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
Fargerforweb
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
#CC0000 #FF8800 #000000
#C00 #F80 #000
Web sikre farger
Love Helvetica
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.
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
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
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
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.
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.
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.
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.
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.
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.
God designløser oppgaver, påvirker
og skaper verdi
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
Brukeren
top related