SlideShare a Scribd company logo
1 of 43
Download to read offline
torsdag 21. februar 13
Tor Åge Vorren

           Art director i Rød Tråd.
           Jobber med grafisk design, webdesign, film, motion graphics, illustrasjon,
           konseptutvikling og prosjektledelse.



           Rød Tråd

           Et fullservice reklamebyrå i Tromsø med 12 ansatte.




torsdag 21. februar 13
Webdesign




torsdag 21. februar 13
Grafisk profil


           Nettsiden er en del av en større identitet.


           Designet må uttrykke de samme verdiene
           og uttrykk som bedriftens grafiske profil.


           Nettsiden må være en av brikkene som
           sammen skaper bedriftens «brand»




torsdag 21. februar 13
Webdesign



           Designet må underbygge sidens formål.


           Hva ønsker du at brukeren skal gjøre på din side?


           Hva ønsker brukeren å gjøre på din side?




torsdag 21. februar 13
Webdesign



           Leveregel




torsdag 21. februar 13
Det må aldri være tvil


          Elkjøp har mange
          produkter de vil at
          du skal kjøpe.




torsdag 21. februar 13
Det må aldri være tvil


          VG har mange nyheter
          de vil at du skal lese.
          (og annonser de vil du skal klikke på)




torsdag 21. februar 13
Det må aldri være tvil


          Dropbox vil at du skal
          laste ned og registrere
          deg som bruker.




torsdag 21. februar 13
Det må aldri være tvil


          Google vil at du
          skal søke etter noe.




torsdag 21. februar 13
Farger




           Hvilke farger signaliserer hva?




torsdag 21. februar 13
Farger

           Noen farger er seriøse.




torsdag 21. februar 13
Farger

           Noen farger er oppløftende og stimulerende.




torsdag 21. februar 13
Farger

           Bruk fargene til å lede brukeren i riktig retning.
           - seriøs info

           - pris

           - bestill

           - skap trygghet

           - utnytt kontraster for å fremheve viktige områder




torsdag 21. februar 13
Farger




torsdag 21. februar 13
Farger




                            Noen farger


                         passer ikke sammen


torsdag 21. februar 13
Farger




                          Andre farger


                         skaper harmoni


torsdag 21. februar 13
Former


           Hvilke former signaliserer hva?




torsdag 21. februar 13
Former
                                     Tekst   Tekst
           Hva kan du klikke på?




                             Tekst           Tekst



                         Tekst               Tekst




torsdag 21. februar 13
Formuleringer


            Call to action




                           Klikk her!        Meld deg på




                         Legg i handlekurv     Bestill




torsdag 21. februar 13
Ikoner


            Bruk ikoner for kommunisere raskere




                                           Legg i handlekurv




                                              Last ned




torsdag 21. februar 13
Fonter


           En font er et skriftsnitt (utseendet til et sett tegn/bokstaver)


           Alle fonter har sitt eget uttrykk og personlighet.


           Fontvalget må være bevisst.


           Tenk lesevennlighet ved salg av størrelse og
           fargekombinasjoner




torsdag 21. februar 13
Fonter



                         Noen fonter er useriøse,
                         uelegante og barnslige.
               Uttrykker uhøytidelighet og lekenhet.
                                  Comic Sans




torsdag 21. februar 13
Fonter



                         Noen fonter er seriøse.
                  Uttrykket er stødig og troverdig.
                                  Baskerville




torsdag 21. februar 13
Fonter



                   Andre fonter er moderne.
                         Uttrykker fremgang og
                               aktualitet.
                                Gotham Rounded




torsdag 21. februar 13
Navigasjon




                         Skjønner du hvor du kommer?


                         Finner du veien du ønsker å gå?


                         Vet du instinktivt hvor du skal klikke?




torsdag 21. februar 13
Navigasjon




torsdag 21. februar 13
Navigasjon




torsdag 21. februar 13
Navigasjon




torsdag 21. februar 13
Navigasjon




torsdag 21. februar 13
Navigasjon




torsdag 21. februar 13
Navigasjon




torsdag 21. februar 13
Estetikk



           Er det behagelig eller får du vondt i hodet?




torsdag 21. februar 13
torsdag 21. februar 13
Estetikk




torsdag 21. februar 13
torsdag 21. februar 13
torsdag 21. februar 13
torsdag 21. februar 13
torsdag 21. februar 13
torsdag 21. februar 13
Responivt eller egen variant for mobile enheter?



           Er siden mobiltilpasset? Test ut.


           Hvordan bevares designets verdi på forskjellige skjermer?


           Klarer siden å utøve sin funksjon på alle plattformer?




torsdag 21. februar 13
Avslutning



                         • «Don´t make me think»

                         • Ta vare på merkevaren

                         • La det aldri være tvil om hva brukeren skal og kan gjøre

                         • Presenter deg på ditt mest attraktive. Dette er din utstilling og
                         personlige service på nettet.

                         • Sett deg i brukerens stol. Hvordan ønsker du å bli møtt når du
                         går inn i en butikk?




torsdag 21. februar 13
Spørsmål?




           toraage@rodtrad.no


torsdag 21. februar 13

More Related Content

More from DinBedriftPaNett

Markedsfør med nyhetsbrev
Markedsfør med nyhetsbrevMarkedsfør med nyhetsbrev
Markedsfør med nyhetsbrevDinBedriftPaNett
 
Kurs i Facebook: Historier, annonser og konkurranser
Kurs i Facebook: Historier, annonser og konkurranserKurs i Facebook: Historier, annonser og konkurranser
Kurs i Facebook: Historier, annonser og konkurranserDinBedriftPaNett
 
Praktisk case i nettbutikk - Moose on the loose
Praktisk case i nettbutikk - Moose on the loose  Praktisk case i nettbutikk - Moose on the loose
Praktisk case i nettbutikk - Moose on the loose DinBedriftPaNett
 
Strategisk bruk av sosiale medier
Strategisk bruk av sosiale medierStrategisk bruk av sosiale medier
Strategisk bruk av sosiale medierDinBedriftPaNett
 
Søkemotoroptimalisering (seo) presentasjon din bedrift på nett
Søkemotoroptimalisering (seo)   presentasjon din bedrift på nett Søkemotoroptimalisering (seo)   presentasjon din bedrift på nett
Søkemotoroptimalisering (seo) presentasjon din bedrift på nett DinBedriftPaNett
 
Strategisk bruk av design
Strategisk bruk av design Strategisk bruk av design
Strategisk bruk av design DinBedriftPaNett
 
Kommunikasjon i blinde pdf
Kommunikasjon i blinde pdfKommunikasjon i blinde pdf
Kommunikasjon i blinde pdfDinBedriftPaNett
 
Okt 2013 mobile nettløsninger og hvorfor det er viktig for din bedrift
Okt 2013 mobile nettløsninger   og hvorfor det er viktig for din bedriftOkt 2013 mobile nettløsninger   og hvorfor det er viktig for din bedrift
Okt 2013 mobile nettløsninger og hvorfor det er viktig for din bedriftDinBedriftPaNett
 
Google lokalt preso_dbpn_pdf
Google lokalt preso_dbpn_pdfGoogle lokalt preso_dbpn_pdf
Google lokalt preso_dbpn_pdfDinBedriftPaNett
 
Strategisk bruk av sosiale medier din bedrift
Strategisk bruk av sosiale medier  din bedriftStrategisk bruk av sosiale medier  din bedrift
Strategisk bruk av sosiale medier din bedriftDinBedriftPaNett
 
Kurs 2: informasjonsstruktur
Kurs 2: informasjonsstrukturKurs 2: informasjonsstruktur
Kurs 2: informasjonsstrukturDinBedriftPaNett
 
Hvor bør bedriften være på nett? Målgruppe 3
Hvor bør bedriften være på nett? Målgruppe 3Hvor bør bedriften være på nett? Målgruppe 3
Hvor bør bedriften være på nett? Målgruppe 3DinBedriftPaNett
 

More from DinBedriftPaNett (20)

Markedsfør med nyhetsbrev
Markedsfør med nyhetsbrevMarkedsfør med nyhetsbrev
Markedsfør med nyhetsbrev
 
Kurs i Instagram
Kurs i InstagramKurs i Instagram
Kurs i Instagram
 
Kurs i Facebook: Historier, annonser og konkurranser
Kurs i Facebook: Historier, annonser og konkurranserKurs i Facebook: Historier, annonser og konkurranser
Kurs i Facebook: Historier, annonser og konkurranser
 
Praktisk case i nettbutikk - Moose on the loose
Praktisk case i nettbutikk - Moose on the loose  Praktisk case i nettbutikk - Moose on the loose
Praktisk case i nettbutikk - Moose on the loose
 
Strategisk bruk av sosiale medier
Strategisk bruk av sosiale medierStrategisk bruk av sosiale medier
Strategisk bruk av sosiale medier
 
Søkemotoroptimalisering (seo) presentasjon din bedrift på nett
Søkemotoroptimalisering (seo)   presentasjon din bedrift på nett Søkemotoroptimalisering (seo)   presentasjon din bedrift på nett
Søkemotoroptimalisering (seo) presentasjon din bedrift på nett
 
Webdesign
WebdesignWebdesign
Webdesign
 
Strategisk bruk av design
Strategisk bruk av design Strategisk bruk av design
Strategisk bruk av design
 
Kommunikasjon i blinde pdf
Kommunikasjon i blinde pdfKommunikasjon i blinde pdf
Kommunikasjon i blinde pdf
 
Bildebruk på web
Bildebruk på webBildebruk på web
Bildebruk på web
 
Okt 2013 mobile nettløsninger og hvorfor det er viktig for din bedrift
Okt 2013 mobile nettløsninger   og hvorfor det er viktig for din bedriftOkt 2013 mobile nettløsninger   og hvorfor det er viktig for din bedrift
Okt 2013 mobile nettløsninger og hvorfor det er viktig for din bedrift
 
Kurs nyhetsbrev
Kurs nyhetsbrev Kurs nyhetsbrev
Kurs nyhetsbrev
 
Facebook presentasjon
Facebook presentasjonFacebook presentasjon
Facebook presentasjon
 
Google lokalt preso_dbpn_pdf
Google lokalt preso_dbpn_pdfGoogle lokalt preso_dbpn_pdf
Google lokalt preso_dbpn_pdf
 
Strategisk bruk av sosiale medier din bedrift
Strategisk bruk av sosiale medier  din bedriftStrategisk bruk av sosiale medier  din bedrift
Strategisk bruk av sosiale medier din bedrift
 
Adwords ppt
Adwords pptAdwords ppt
Adwords ppt
 
Kurs 3: Innhold på nett
Kurs 3: Innhold på nettKurs 3: Innhold på nett
Kurs 3: Innhold på nett
 
Kurs 2: informasjonsstruktur
Kurs 2: informasjonsstrukturKurs 2: informasjonsstruktur
Kurs 2: informasjonsstruktur
 
Mobile nettløsninger
Mobile nettløsningerMobile nettløsninger
Mobile nettløsninger
 
Hvor bør bedriften være på nett? Målgruppe 3
Hvor bør bedriften være på nett? Målgruppe 3Hvor bør bedriften være på nett? Målgruppe 3
Hvor bør bedriften være på nett? Målgruppe 3
 

Kurs 2: design på nettstedet ditt

  • 2. Tor Åge Vorren Art director i Rød Tråd. Jobber med grafisk design, webdesign, film, motion graphics, illustrasjon, konseptutvikling og prosjektledelse. Rød Tråd Et fullservice reklamebyrå i Tromsø med 12 ansatte. torsdag 21. februar 13
  • 4. Grafisk profil Nettsiden er en del av en større identitet. Designet må uttrykke de samme verdiene og uttrykk som bedriftens grafiske profil. Nettsiden må være en av brikkene som sammen skaper bedriftens «brand» torsdag 21. februar 13
  • 5. Webdesign Designet må underbygge sidens formål. Hva ønsker du at brukeren skal gjøre på din side? Hva ønsker brukeren å gjøre på din side? torsdag 21. februar 13
  • 6. Webdesign Leveregel torsdag 21. februar 13
  • 7. Det må aldri være tvil Elkjøp har mange produkter de vil at du skal kjøpe. torsdag 21. februar 13
  • 8. Det må aldri være tvil VG har mange nyheter de vil at du skal lese. (og annonser de vil du skal klikke på) torsdag 21. februar 13
  • 9. Det må aldri være tvil Dropbox vil at du skal laste ned og registrere deg som bruker. torsdag 21. februar 13
  • 10. Det må aldri være tvil Google vil at du skal søke etter noe. torsdag 21. februar 13
  • 11. Farger Hvilke farger signaliserer hva? torsdag 21. februar 13
  • 12. Farger Noen farger er seriøse. torsdag 21. februar 13
  • 13. Farger Noen farger er oppløftende og stimulerende. torsdag 21. februar 13
  • 14. Farger Bruk fargene til å lede brukeren i riktig retning. - seriøs info - pris - bestill - skap trygghet - utnytt kontraster for å fremheve viktige områder torsdag 21. februar 13
  • 16. Farger Noen farger passer ikke sammen torsdag 21. februar 13
  • 17. Farger Andre farger skaper harmoni torsdag 21. februar 13
  • 18. Former Hvilke former signaliserer hva? torsdag 21. februar 13
  • 19. Former Tekst Tekst Hva kan du klikke på? Tekst Tekst Tekst Tekst torsdag 21. februar 13
  • 20. Formuleringer Call to action Klikk her! Meld deg på Legg i handlekurv Bestill torsdag 21. februar 13
  • 21. Ikoner Bruk ikoner for kommunisere raskere Legg i handlekurv Last ned torsdag 21. februar 13
  • 22. Fonter En font er et skriftsnitt (utseendet til et sett tegn/bokstaver) Alle fonter har sitt eget uttrykk og personlighet. Fontvalget må være bevisst. Tenk lesevennlighet ved salg av størrelse og fargekombinasjoner torsdag 21. februar 13
  • 23. Fonter Noen fonter er useriøse, uelegante og barnslige. Uttrykker uhøytidelighet og lekenhet. Comic Sans torsdag 21. februar 13
  • 24. Fonter Noen fonter er seriøse. Uttrykket er stødig og troverdig. Baskerville torsdag 21. februar 13
  • 25. Fonter Andre fonter er moderne. Uttrykker fremgang og aktualitet. Gotham Rounded torsdag 21. februar 13
  • 26. Navigasjon Skjønner du hvor du kommer? Finner du veien du ønsker å gå? Vet du instinktivt hvor du skal klikke? torsdag 21. februar 13
  • 33. Estetikk Er det behagelig eller får du vondt i hodet? torsdag 21. februar 13
  • 41. Responivt eller egen variant for mobile enheter? Er siden mobiltilpasset? Test ut. Hvordan bevares designets verdi på forskjellige skjermer? Klarer siden å utøve sin funksjon på alle plattformer? torsdag 21. februar 13
  • 42. Avslutning • «Don´t make me think» • Ta vare på merkevaren • La det aldri være tvil om hva brukeren skal og kan gjøre • Presenter deg på ditt mest attraktive. Dette er din utstilling og personlige service på nettet. • Sett deg i brukerens stol. Hvordan ønsker du å bli møtt når du går inn i en butikk? torsdag 21. februar 13
  • 43. Spørsmål? toraage@rodtrad.no torsdag 21. februar 13