KONCEPTUDVIKLING TIL DIGITALE MEDIER TRENDS, METODER OG VÆRKTØJER Anna Taws, digital designer Jonas Friisberg Nielsen, kommunikationsrådgiver
KONCEPTUDVIKLINGTIL DIGITALE MEDIER
TRENDS, METODER OG VÆRKTØJER
Anna Taws, digital designerJonas Friisberg Nielsen, kommunikationsrådgiver
65 medarbejdere i København, Århus og Malmø.
Fokus på strategisk rådgivning og løsning af integrerede kommunikations- og udviklingsopgaver for private og offentlige virksomheder
Bysted er med sine 20 år i branchen en velkonsolideret virksomhed, både økonomisk og fagligt. Bysted er en del af Intellecta AB
Bysted har indgået en strategisk alliance med Force Technology’s Human factors specialister og produktdesignerne Harrit-Sørensen ASi navnet MANFAC
THE BASIC FACTS
Kort om os
Kort om os - SPIDSKOMPETENCERNE
Kampagne & PR
Analyse & Strategi
Visuel identitet
DesignManagement
Finansielkommunikation
Oplevelses-kommunikation
Teknisk rådgivning-og implementering
Digital Kommunikation
DEN MEDIEREDEOPLEVELSE
De oplevelser vi skaber, påvirkes af det medie, vi kommunikerer i
http://www.flickr.com/photos/hulk4598/3405941761/
5Tendenserfor det digitalemedie…
Det mobile internet
1
http://www.flickr.com/photos/gonzalobaeza/4096799964/
Større muligheder for mobilitet
3G4G
Oplevelser knyttes til sted…
Augmented reality…
http://www.flickr.com/photos/turkletom/4325703868/sizes/l/
Touchscreen grænseflader…
http://www.flickr.com/photos/aperturismo/4488250788/
Påvirkning af tekniske formater…
http://www.flickr.com/photos/allaboutgeorge/4579793448/
Socialt2
http://www.flickr.com/photos/suvcougar/1273657633/sizes/o/
Community og deltagelse…
Brugergenereret indhold…
Det mobile internet
1
Adfærds-formende design
3
http://www.flickr.com/photos/bluesquarething/3596988489/sizes/l/
Design, der udelukker eller motiverer til en bestemt adfærd…
Remix4
Remedieret indhold…
5 Rigere medieindhold
http://www.flickr.com/photos/cyberdees/2618269398/sizes/l/
Mange formidlingsmuligheder…
Det betyder alt sammen noget for den måde, brugerne anvender mediet…
Forventningshorisont og tålmodighed har flyttet sig…
Der er kommet rigtig mange om buddet…
Digital intimitet og ambient awareness
www.boingboing.net
Vi bruger flere platforme til at tilgå medieindholdet…
Brugskonteksten ændrer sig…
http://www.flickr.com/photos/ahyatt/3196068902/
…og det gør det alt sammen (endnu mere) vigtigt
med et nuanceret syn på brugerne
Traditionel marketing:
Den forsvarsløse modtager
http://www.flickr.com/photos/visbeek/2348285288/
Peter Merholz m.fl.: Subject to Change (2008), O’Reilly
Økonomiske modeller
Nyttemaksimerende rationel adfærd
http://www.flickr.com/photos/tao_zhyn/442965594/
Peter Merholz m.fl.: Subject to Change (2008), O’Reilly
Human Computer interaction
Adfærd baseret på fastlagte mål og opgaver
http://www.flickr.com/photos/torley/2587091353/
Peter Merholz m.fl.: Subject to Change (2008), O’Reilly
Ikke helt forkert, men…Mennesker er trods alt mere komplekse
Det gode koncept bør (også) tage højde for:- Følelser
- Kontekst
- Hverdagsliv
http://www.flickr.com/photos/janet_calcaterra/266571955/sizes/o/
Det gode koncept er forankret i en klar strategi (og alle efterfølgendedesignaktiviteter bør fokuseres på at
opfylde strategiens mål)
Den digitale strategi
Målsætninger og forretningsstrategi
Hvorfor kommunikerer vi online? Hvilke forretningsmæssige mål ønsker vi at opnå? Hvordan kan det måles (f.eks. i øgede indtægter eller reducerede omkostninger)? Hvilke operationelle mål understøtter forretningsmålene?
Identificér målgruppen
Hvem skal vi kommunikere med online? Hvad kendetegner dem? Hvordan skal vi prioritere vores målgrupper?
Brandposition og værdigrundlag
Hvilket brand og hvilke værdier ønsker vi at kommunikere?
Måling og opfølgning
Hvordan måler vi på, om målene er opfyldt – og hvornår måler vi?
Informationsarkitektur, interaktionsdesign
og indhold
Skitser, strukturdiagrammer, flowcharts, interaktive prototyper, visuelt design
Teknik og valg af platform
TYPER AF SITES, MEDIER OG SYSTEMER
OPEN SOURCE
PR
OJE
KTR
UM
, W
EB
LOG
S &
GR
UPPE
RS
OC
IALE
MED
IER
OG
MIN
I-SIT
ES
CLOSED SOURCE
VISUELDESIGN
VISUELLE KONCEPTER TIL DIGITALE MEDIER
Nogle genrer….
BRANDING
Dansk design center – ddc.dk Branding
Novozymes årsrapport Branding
INFORMATIVE/SERVICESITES
Uddannelsesguiden - ug.dk Informative/service sites
Københavns Kommune - kk.dk Informative/service sites
SALG
Kino.dk Salg
OPLEVELSER
Vibeonline.dk Oplevelse
Københavns Befæstning - befaestningen.dk
Oplevelse
SOCIALEPLATFORME
FC Savanna – fcsavanna.dk Sociale platforme
Activista – myactivista.org Sociale platforme
Det Danske Spejderkorps - dds.dk Sociale platforme
KOLLEKTIV HANDLING
WWF Verdensnaturfonden, Earth Hour – wwf.dk/earthhour
Kollektivehandlinger
WWF Verdensnaturfonden - burningpanda.dk
Kollektivehandlinger
# Mobil: Smartphones
# Viralt
Andre platforme
Smartphones
Smartphones
Ipad
Viral kampagne
HOW TO DO…
# alt er baseret på vores fortid
# tag noget uensartet og lave det til noget nyt
# systematisere alt, restriktioner giver frihed
Nogle ord om kreativ proces
BYGGERIET
# Design + kode
# Wireframes, mockup
# Struktur
# Grid
Byggeriet
Design + kode
Wireframes
Struktur
Grid system
Grid system
Grid system
# Konsistens
# Framework for mange sider
# Nemt at bruge
# Præ-eksisterende struktur
Grid system
RESSOURCER
# Fonte
# Farve
# Ikoner
# Billeder
Ressoucer
FONTE
Font muligheder med CSS
Serif eller sans serif
Linje længde (12 ord er godt!)
Leading (1.1 – 1.5 em)
Letterspacing Lower cast – gør det ikke!
Kerning – spatiering
Farve font vs. hvid space
# Georgia
# Verdana
# Lucida
# Palatino
# Arial
# Gill sans
# Helvetica Neue
Websikre fonte
Hvad med de non-websikre fonte?
# Sifr
# Pixel rendering (image file)
# Cufon (javascript)
# Typekit (javascript)
Font
Font
Font
FARVE
3 Farve sites
# Kuler
# colorotate
# colourlovers
# designmeltdown
Farve
Farve
Farve
Farve og billeder
Ikoner
Ikoner
Ikoner
Ikoner
# istock
# famfamfam
# Iconfinder.net
Ikoner
Knapper, call to action
FLEREVÆRKTØJER
# Software værktøj
# Templates
# Inspiration
# Fireworks
# Photoshop
# Flash
# Illustrator
Software værktøj
CSS layouts og templates
5 inspirations/nytte links
http://www.designfloat.com/
http://delicious.com/popular/design
http://psd.tutsplus.com/
http://www.smashingmagazine.com/
http://patterntap.com/
Inspiration
Inspiration
Inspiration
Inspiration
Inspiration
FREMTIDEN?
4 WEBDESIGNTENDENSER
Design For Delight
Print Design Influence
Real life metaphor
Rich, Strong Typography
Kilde: http://www.smashingmagazine.com/2010/05/04/web-design-trends-2010/
Design For Delight
Design For Delight
Design For Delight
Design For Delight
Design For Delight
Print Design Influence
Print Design Influence
Print Design Influence
Print Design Influence
Real life methaphor
Real life methaphor
Rich, Strong Typography
Rich, Strong Typography
What’s next
Navigation
Touchscreen
Knapper
GPS
Navigation
Navigation
Navigation
Navigation
Zipcar
Iphone apps
Er du klar?
Enkelhed fungerer bedst!
Brug metaforer fra den virkelige verden
Design til dynamisk indhold
Tak for jeres tid!
Grid
http://960.gs/http://www.designinfluences.com/fluid960gs/#http://www.spry-soft.com/grids/Fonthttp://www.josbuivenga.demon.nl/index.htmlhttp://www.theleagueofmoveabletype.com/
Font replacementhttp://www.mikeindustries.com/blog/sifrhttp://cufon.shoqolate.com/generate/http://typekit.com/
Farvehttp://kuler.adobe.com/#http://www.colorotate.org/http://www.colourlovers.com/http://2010.designmeltdown.comhttp://www.colourlovers.com/# http://labs.ideeinc.com/multicolr/
Ikonerhttp://www.iconfinder.com/http://www.iconwerk.de/http://famfamfam.com/http://www.istockphoto.com/index.php
Links> Templates
http://www.intensivstation.ch/en/templates/
Webværktøjhttp://www.designfloat.com/http://delicious.com/popular/designhttp://psd.tutsplus.com/http://www.smashingmagazine.com/http://patterntap.com/
Trendshttp://www.yourauxiliary.com/http://duplos.org/http://www.clholloway.co.za/http://www.fajnechlopaki.com/https://www.drippinginfat.com/http://carbonmade.comhttp://thebolditalic.com/AndreasTrolf/stories/159-dr-feelgoodhttp://thebolditalic.com/Kornlock/stories/185-cinderella-story-day-onehttp://visitmix.com/http://designinformer.com/grid-based-web-design-simplified/
JONAS FRIISBERG NIELSEN
E-mail: [email protected]: @jonasfriisberg39 16 27 00
ANNA TAWS
E-mail: [email protected]: @annataws39 16 27 00www.taws.dk
SPØRGSMÅL?