Konceptudvikling final

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…

http://www.dontclick.it/

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/


Human Computer interaction

Adfærd baseret på fastlagte mål og opgaver

http://www.flickr.com/photos/torley/2587091353/


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

http://www.youtube.com/watch?v=xgOyTNtsWyY

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





Real life methaphor

Real life methaphor



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?