NKF web design 3

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