CPH Distortion

Dist

ortion

PH We R

ock Y

our W

orld

2

RAPPORTCopenhagen Distortion Festival“We Rock Your World”

Kirsten Lynge Trefeldt, 3. semester 2011

Udgivet: 6. juni 2011

3Kirsten Lynge Trefeldt

3. semester, 2011

Distortion PH We Rock Your World

Indeks

1.Kapitel-Indledning 4 2.Kapitel-Koncept 6 2.1 Problemfelt 6 2.2 Metodeafsnit 6 3.Kapitel-Teorier 7 3.1 Udviklingsprocessen 7 3.2 Produktdokumentation og perspektiver 7 3.2.1 Kommunikative aspekter 7 3.2.2 Visuelt design 8 3.2.3 iphone-app | systemdesign 10 3.2.4 Site - interaktionsudvikling 12

4.Kapitel-Tillæg A Gantkort til projektstyring 14 B Navigationsdiagram 15 C Boksstrukturdiagrammer 16 D Dynamiske elementer 17 E Designmanual 18 F Synopsis/treatment (animatic) 29 G Storyboard 30

5.Kapitel-Litteraturliste 32 5.1 Obligatoriske elementer 32

Bilag-elektronisk CD/DVD med det samlede projektmateriale

4 Kirsten Lynge Trefeldt

3. semester, 2011


Kilde: www.visitdenmark.com - 4/6-2011http://da.wikipedia.org/wiki/Festival - 4/6-2011

Danmark huser årligt over 180 festivaler. Den største

danske musikfestival er Roskilde Festivalen, mens

den ældste er Skagen Festival. Danmarks mindste

festival er Callisto Festivalen i Taastrup .

CopenhagenDistortion

Copenhagen Distortion blev etableret i 1998 og er en

årlig tilbagevendende begivenhed. Festivalen løber

af stabelen i juni måned mellem d. 1. - 5. juni i det

indre København. Mere end 80 individuelle fester af-

holdes fordelt på 5 dage og nætter på Nørrebro, Ves-

terbro, Indre by og Islands Brygge. Festivalen byder

på alt fra store block-parties til mindre fester og re-

ceptioner i busser, barer og på stranden. Diverse ar-

tister optræder i løbet af festivalen her iblandt også

internationale elektroniske dj’s.

Copenhagen Distortion regnes for at være en af

Danmarks mest populære festivaler med mere end

40.000 festglade deltagere.

Opgavestilling

Projektopgaven omfatter blandt andet udarbejdelse

af en nyhedssiteprototype til en festival. Herudover

skal der defineres et layout samt et grafisk design,

som kan præsentere indholdet på sitet bedst muligt.

Endvidere er det et krav til løsningen, at der designes

en grafisk brugerflade til mobile platforme.

Opgaveløsning

CPH Distortion Festival er valgt til opgaveløsningen.

Den udarbejdede løsning indeholder integration af

sociale medier som Facebook og Twitter . Herudover

er der tænkt i enkel og kontant/kort kommunikation,

der kommer til udtryk i resumeform med link til mere

uddybende information. Sitedesignet vil bevirke, at

der bliver mindre scrollflader. Dette giver målgrup-

IndledningKapitel 1

Kirsten Lynge Trefeldt


3. semester, 2011


pen et hurtigere overblik over sitet. Den overordnede

struktur på sitet er blevet fladere, hvilket giver et hur-

tigere overblik over de løbende events, der foregår i

de 5 festivaldage.

Tekster, programmer mm. læses via links til eksterne

dokumenter. Dropdownmenuer på eventsiderne sør-

ger for relevante og selektive informationer.

Der er sat stor fokus på en visualisering af festi-

valdagene i form af billedanimationer og større og

anderledes videoflader, der giver brugeren et bedre

stemnings- og sanseindtryk. I designet er der an-

vendt et farvevalg med maximum 5 farver i tråd med

CPH Distortions egne termer for farvekompleksitet.

Farvevalget er gjort i farver, der symboliserer ung-

dom, glæde, varme og kreativitet.

Med den nye sitekonstruktion understøttet af et

mindre rodet design og en let læselig typografi for-

ventes det, at brugeren får tjekket alle informationer

og får en god visuel oplevelse og et bedre indtryk

af festivalstemningen. Summen af det nye design vil

bevirke, at brugeren af sitet ikke mister overblikket

undervejs.

Copenhagen Distortion er en af Danmarks mest populære festivaler. Med mere end 40.000 festglade deltagere løber festivalen af stabelen i juni måned i det indre København.


3. semester, 2011


2.1ProblemfeltProblemformulering

Hvordan skabes og designes et interessant ny-

hedssite med tilhørende grafisk brugerflade til mo-

bile platforme for Copenhagen Distortion Festival?

Problemafgrænsning

Hvordan kan Copenhagen Distortion Festival via ny-

hedssitet og mobilappliaktionen opnå størst mulig

opmærksomhed hos en bred målgruppe?

2.2MetodeafsnitRapporten er struktureret på følgende måde: Kapitel

1 rummer en indledning. Kapitel 2 giver en afklaring

af koncept og problemfeltet. Kapitel 3 gennemgår de

teorier, der er anvendt i udviklingsproces, produkt-

dokumentation, de kommunikative aspekter og per-

spektiver. Herudover gennemgås designkonceptet,

den grafiske brugerflade til mobile enheder samt in-

teraktionsudvikling

“Distortion - Celebrating Copenhagen since 1998. Every day from 17.00 we do street parties: it’s free, it’s in a differ-ent neighbourhood each day, together with many cool local shops, bars, cafes and galleries. Every night from 22.00 we Club Clash: it’s cheap enough, it’s new music, it’s good for you and it’s bad for your mother. Willkommen, Bienve-nue, Welcome.”

Det nye designkoncept indeholder en designmanual,

der danner baggrund for den visuelle fremstilling af

den grafiske brugerflade til en prototype på et ny-

hedssite og til en iphone-applikation. Det visuelle

udtryk der er valgt til designkonceptet er Postmod-

ernisme. Postmodernismen afspejler stærke og klare

farver på detaljer samt et bredt spektrum af mønstre.

De to nydesignede medieplatforme - nyhedssitet og

den grafiske brugerflade til mobile platforme vil un-

derstøtte Copenhagen Distortion Festivals budskab

på en ny, ung og forfriskende måde. Med større se-

lektivitet end det nuværende website vil de nye plat-

forme bidrage til informationer om festivalen på en

mere klar, overskuelig og forenklet måde.

Den nye version af nyhedssitet vil med den nye vi-

suelle fremtoning og enkelhed tale bedre til målgrup-

pen og tiltrække nye potentielle festivaldeltagere.

KonceptKapitel 2



3. semester, 2011


3.1UdviklingsprocessenSideløbende med rapportskrivning har projektet

taget udgangspunkt i følgende faser:

• Research og indsamling af data

• Tanker omkring koncept, design og farver

• Idéudvikling til animatics og siteanimation

• Konkretisering af projektet

Projektet har ud fra planlægningsgrundlaget i start-

fasen været fokuseret på vandfaldsmodellen, der er

kendetegnet ved kontinuerlige faseafslutninger. I de

tekniske og idébaserede faser har projektet lænet

sig op af de inkrementelle projektmodeller - den i-

terative projektmodel B samt Spiralmodellen. Især

designfasen, hvor der eksperimenters med former

og farver indtil et tilfredsstillende resultat, kan rela-

teres til den eksperimentelle B-model. Omkring den

tekniske udvikling af nyhedssitet har projektet lænet

sig op af Spiralmodellen.

Jeg har så vidt muligt estimeret mest tid til den krea-

tive proces, som jeg finder er den mest tidskræv-

ende. I den kreative proces omkring animatic, story-

board, sitedesign og kommunikation har jeg anvendt

associationsteknik. Herefter har jeg sat de frem-

komne idéer op mod opgaveformuleringen og fundet

det færdige resultat. Som støtteværktøj til udviklings-

processen har jeg udarbejdet et GANT-kort.

3.2Produktdokumentationogper- spektiver

3.2.1KommunikativeaspekterCopenhagen Distortion skal kommunikere på alle

planer til den mangefacetterede målgruppe som

består både af børn, unge og pensionister på alle

kulturelle niveauer. Det er derfor vigtigt, at kommu-

nikationsformen som anvendes pt. på deres site

radikaliseres, så alle forstår budskabet. Som det ser

ud nu, er sprogformen meget indforstået, og taler

kun til den helt unge målgruppe.

Kapitel 3

Teorier


3. semester, 2011


Logo

Copenhagen Distortions nuværende logo er lidt for

detaljeret og kaotisk at se på. På den baggrund er

der udarbejdet forslag til nyt logo/logotype. Tanken

med det nye logo er, at lave en forenkling samt illus-

trere musikken, som er det bærende element gen-

nem hele Distortion Festivalen. C’et for Copenhagen

symboliseres derfor af en afbrækket CD/DVD.

Til understøttelse af Logo og logotype er der udfær-

diget et slogan: “We Rock Your World”.

5.element

Der er udarbejdet en supergrafisk effekt i form af en

hånd, der gør V-tegn. V-tegnet ses typisk, hvor der

er unge mennesker til koncert eller festival. V-tegnet

gør det ud for CPH Distortions 5. element.

3.2.2Visueltdesign

Det udviklede designkoncept til Copenhagen Distor-

tion består af en designmanual, som danner bag-

grund for visualisering af den grafiske brugerflade

til en prototype på et nyhedssite og til en iphone-

applikation. Med udgangspunkt i designmanualen er

der endvidere udarbejdet forslag til nyt logo, slogan,

merchandise og øvrigt promotionmateriale.

Stilart

Det visuelle udtryk der er valgt til designkonceptet er

Postmodernisme. Stilen er kendetegnet ved stærke

og klare farver på detaljer, et bredt spektrum af møn-

stre, geometriske former som trekanter, firkanter og

cirkler. Postmodernismen er ofte inspireret af storby-

nattens neonlys, hvilket harmonerer med Copenha-

gen Distortions festivalarrangementer.

TeorierKapitel 3



3. semester, 2011


Farvesammensætning

I tråd med Copenhagen Distortion Festivals egne

termer er farvepaletten udviklet til at repræsentere

de fem kvarterer, der er en del af den 5-dage lange

Distortionfest. De rene farver anvendes både på site

og grafisk brugerflade til Distortion-iphone-app.

Farvesammensætningen består af 3 tertiærfarver

herudover en ren sort og en ren hvid. Den orange,

mørkturkise og lysturkise er rene, klare og mættede

farver uden brug af beskygning. Den varme rødor-

ange farve er blandet af den gule farves lys og den

røde farves varme. De kølige turkise toner er blandet

af lige dele grønt og blåt.

Farveriforholdtilstilart

Farverne er i tråd med Postmodernismens stærke og

klare pangfarver.

FarveriforholdtilKBHogmålgruppen

Den rødorange farve udstråler varme, kreativitet,

strålekraft, sikkerhed og selvrespekt. De turkise

toner symboliserer glæde og ungdommelighed, men

også kølighed, beherskelse og sentimentalitet. De 3

farver tilfører projektet en energi, der matcher mål-

grupen, som hovedsagelig hører til den yngre del af

befolkningen. Karaktermæssigt består målgruppen

af energiske, kreative og teknisk mindede menne-

sker. De friske farvetoner antyder ungdom, kreativ-

itet (kunst) og mobilitet.

Designelementer

Som designelementer anvendes skitser af menne-

sker i bevægelse, musiksymboler og en super-

grafiske effekt, som kan ses i designmanualen. Det,

at festivalen er mobil bliver blandt andet symboliseret

ved silhouettegninger af mennesker i bevægelse.

Kapitel 3

Teorier


3. semester, 2011


Typografi

I overensstemmelse med site og andet materiale i

det visuelle koncept, er fonten Arial valgt til anven-

delse på brugerfladen.

Logo

Det nye logo er placeret øverst i venstre side af time-

baren på iphone-brugerfladen.

Brugerfladen

Overordnet ikon for applikationen ses som num-

mer 1 i ikonmenuen, når der klikkes, kommer man

til “Frontpage”, her klikkes der på billedet, som fører

videre til velkomstsiden “Velcome”. Herefter klikkes

videre til direkte News fra CPH Distortion, der kører

synkront med newssitet. Kontakt-ikonet viser kon-

takter, der blandt andet inkluderer integration med

Facebook. Når man deltager på Festivalen gør

en gps-funktion i applikationen det muligt at søge,

Typografi

Som typografi er fonten Arial valgt. Fonten, som er

en grotesk/sans serif skrifttype, er en læsevenlig

skrifttype i forhold til den eksisterende Courier New,

som anvendes på sitet idag.

3.2.3Iphone-app|Systemdesign

Grafiskdesign

Den grafiske brugerflade til iphoneapplikationen er

udviklet i overensstemmelse med de visuelle ele-

menter i designmanualen.

Ikoner

Ikonmenuen symboliseres af silhouettegninger. Det

gennemgående farvevalg til applikationer er hvid,

sort og de turkise toner i farvepaletten.

TeorierKapitel 3

Mock-ups

Frontpage Velcome News

22:35Monday, June 6, 2011

AT&T 3G

Distortion PH

News Contacts Friends Gallery

Dist

ortio

n

PH Dist

ortio

n PHOTOSPHOTOSPHOTOS

IMAGES IMAGES IMAGESGALLERY

GALLERYlGALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALERY

GALLERYGALLERYl

GALLERYGALLlERY

GALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALLERYl

GALLERY

PHOTOSPHOTOS

IMAGESPHOTOS IMAGESPHOTOSPHOTOS

IMAGESPHOTOS IMAGES

PHOTOS IMAGES

PHOTOSPHOTOS IMAGESPHOTOS

Velcome to CPH Distor-tion Festival App


AT&T 3G

Distortion PH

Dist

ortio

n

PH W

e Roc

k You

r Wor

ld


AT&T 3G

Distortion PH


Dist

ortio

n

PH Dist

ortio



GALLERYlGALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALERY

GALLERYGALLERYl

GALLERYGALLlERY

GALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALLERYl

GALLERY

PHOTOSPHOTOS


IMAGESPHOTOS IMAGES

PHOTOS IMAGES


Kanal Chillout og efterfestFrederiksholms Kanal 4Chillout: 14:00 - 22:00Efterfest: 22:00 - 04:00Fri Entré




Distortion News



3. semester, 2011


hvem af ens venner/kontakter, der befinder sig hvor

på Festivalen - denne funktion findes under ikonet

“Friends”. Afslutningsvist er der mulighed for at se

dugfriske billeder og videoer fra Newssitet i applika-

tionens gallerymenu. Herudover kan man selv up-

loade både billeder og videoer fra de forskellige fes-

tivalevents. Uploadet connecter direkte til newssitet

og kan herefter også ses på mobilen.

iphone-applikationen kan afprøves på :

http://d32382.monline.dk/cphdistortionnewssite/

Kapitel 3

Teorier


AT&T 3G

Distortion PH


Dist

ortio

n

PH Dist

ortio



GALLERYlGALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALERY

GALLERYGALLERYl

GALLERYGALLlERY

GALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALLERYl

GALLERY

PHOTOSPHOTOS


IMAGESPHOTOS IMAGES

PHOTOS IMAGES


Friends at FestivalLocated at FestivalMalene OlsenClub ClashHuset i MagstrædeTime: 23:00 - 03:00Artist: Trentemøller, Mew, Alphabeat,

Located at FestivalPeter BastiansenClub ClashDiscotec InTime: 23:00 - 03:00Artist: Thomas Helmig mfl.

Contacts Friends at Festival Gallery


AT&T 3G

Distortion PH


Dist

ortio

n

PH Dist

ortio



GALLERYlGALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALERY

GALLERYGALLERYl

GALLERYGALLlERY

GALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALLERYl

GALLERY

PHOTOSPHOTOS


IMAGESPHOTOS IMAGES

PHOTOS IMAGES


Gallery


AT&T 3G

Distortion PH


Dist

ortio

n

PH Dist

ortio



GALLERYlGALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALERY

GALLERYGALLERYl

GALLERYGALLlERY

GALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALLERYl

GALLERY

PHOTOSPHOTOS


IMAGESPHOTOS IMAGES

PHOTOS IMAGES


ContactsMalene OlsenBanegårdsvænget 302600 GlostrupTelefon: 40 56 90 21Mail: [email protected]: maleneolsen.dkDay of birth: 02-05-1990

Peter BastiansenGadeboulevarden 222600 GlostrupTelefon: 20 34 67 81Mail: [email protected]: peterbastian.dkDay of birth: 19-04-1970


3. semester, 2011


3.2.4Site-interaktionsudvikling

Den udarbejdede løsning indeholder integration af

sociale medier som Facebook og Twitter. Herudover

er der tænkt i enkel og kontant kommunikation, der

kommer til udtryk i resumeform med link til mere ud-

dybende information. Sitedesignet vil bevirke, at der

bliver mindre scrollflader. Dette giver målgruppen et

hurtigere overblik over sitet. Den overordnede struk-

tur på sitet er blevet fladere, hvilket giver et hurtigere

overblik over de løbende events, der foregår i de 5

festivaldage. I stedet skal tekster, programmer mm.

læses via link til eksterne dokumenter. Dropdown-

menuer på eventsiderne sørger for relevante og

selektive informationer. Der er sat stor fokus på en

visualisering af festivaldagene i form af billedanima-

tioner og større og anderledes videoflader, der giver

brugeren et bedre stemnings- og sanseindtryk. I de-

signet er der anvendt et farvevalg med maximum

5 farver i tråd med CPH Distortions egne termer for

farvekompleksitet. Farvevalget er gjort i farver, der

symboliserer ungdom, glæde, varme og kreativitet.

Med den nye sitekonstruktion understøttet af et

mindre rodet design og en let læselig typografi for-

ventes det, at brugeren får tjekket alle informationer

og får en god visuel oplevelse og et bedre indtryk

af festivalstemningen. Summen af det nye design vil

bevirke, at brugeren af sitet ikke mister overblikket

undervejs.

I forbindelse med interaktionsudviklingen henvises til

navigationsdiagram, bokstrukturdiagrammer, uddrag

af dynamiske elementer i kapitel 4. Sitet kan ses via

adressen: http://d32382.monline.dk/cphdistortionnewssite/

Den videre udvikling ville tage udgangspunkt i re-

sultater fra brugergrupper og fokusgrupper sidst-

nævnte bestående af specialister til validering, ver-

ificering af koncept, brugervenlighed, æstetik og

design.

TeorierKapitel 3



3. semester, 2011


TillægKapitel 4

A GANT-korttilprojektstyringB NavigationsdiagramC BoksstrukturdiagramD DynamiskeelementerE DesignmanualF Synopsis/treatment(animatic)G Storyboard


3. semester, 2011


Akt

ivit

etO

pg

aver

23.24

.25

.26

27.28

.29

.30

.31

.1.

2.3.

4.5.

6.7.

8.9.

10.11

.12

.

Res

earc

h o

g a

nal

yse

Eksi

ster

ende

site

(CPH

Dis

t.)

+ ø

vrig

e fe

stiv

alsi

tes

| bi

lledm

ater

iale

| s

tilar

t

Vis

uel

iden

tite

t fo

r n

ewss

ite

og m

obila

pp

.

Stil

art

(afs

pejle

virks

omhe

dens

USP)

Logo

/log

otyp

e og

5.

elem

ent/

supe

rgra

fisk

effe

kt

Slo

gan

Farv

e (F

arve

skal

a ud

vikl

es e

vt.

i KU

LER)

Typo

graf

i på

new

ssite

og

mob

ilapp

.

iPho

ne-a

pplik

atio

n -

ikon

er +

øvr

ig g

rafis

k br

uger

flade

Præ

sent

atio

n i F

lash

Kam

pag

nem

ater

iale

evt

.Ann

once

| p

laka

t |

t-sh

irt

| po

stko

rt |

Cap

s |

slik

kepi

nde

| Ev

ents

| K

onku

rren

cer

An

imat

icsv

ideo

[3

-5 m

in.]

Syn

opsi

s -

Trea

tmen

tIn

dhol

d -

info

rmer

ende

, un

derh

olde

nde

og d

okum

ente

rend

e.

Stil

: ET

HO

S -

PATO

S -

LO

GO

S

Sto

rybo

ard

Aft

er E

ffec

ts (

mot

iong

raph

ic/t

ekst

+ ø

vrig

e ef

fekt

er)

New

ssit

e ti

l CP

H D

isto

rtio

n F

esti

val

Tekn

isk

dok

um

enta

tion

Layo

utsk

itser

for

udf

orm

ning

af

side

r +

nav

igat

ions

diag

ram

Bok

sstr

uktu

rdia

gram

for

hve

r sk

itse

Indt

astn

ingk

rav

- vi

s da

ta o

g si

der,

der

ska

l ben

ytte

bru

gern

avn/

kode

ord

til lo

ginf

unkt

ion

Ud

arb

ejd

pro

toty

pe

Stil

| s

prog

brug

|na

viga

tion

| fu

nkt

ion

alit

et |

bru

gerv

enlig

hed

mm

.

Lin

k ti

l Fac

eboo

k |

Twit

ter

| Fl

ickr

Indh

old

| ka

mpa

gnem

ater

iale

mv.

på

soc.

med

.

Rap

por

t

Fejl

retn

ing

og

ud

vikl

ing

* A F L E V E R I N G * A F L E V E R I N G *

Ug

e 2

1U

ge

22

Ug

e 2

3

Pro

jekt

CP

H D

isto

rtio

n F

esti

val

A



3. semester, 2011


NAV

IGAT

IONSD

IAGRAM

SQ

L da

taba

se

- Arti

stda

ta

- Års

tal [

vide

o]

- By

- G

ade

- T

idsp

unkt

- E

vent

CP

H D

isto

rtion

New

ssite

inde

x.ph

psi

te.fl

a

Vide

o

vide

o.la

bel

Kon

takt

kont

akt.l

abel

ipho

ne-a

pp

i-app

.labe

l

Arti

st

artis

t.lab

el

Par

ty

party

.labe

l

Clu

b

club

.labe

l

Goo

glem

ap

inde

x.ph

p

Dat

abas

en re

late

rer t

il da

-ta

ene

i dro

pdow

nmen

uern

e på

site

t

B


3. semester, 2011


Det hele

index.phpForsiden site.fla

Boks 1mellemzoneboks

Bund

Boks 2

600 px

50 px

400 px

1200 px

Det hele

Boks 12mellemzoneboks

Bund

600 px

1200 px

Boks Linkmenu100 px

200px

index.phpForsidenGooglemap

C

Boksstrukturdiagrammer



3. semester, 2011


stop();//File downloaded from www.riacodes.com

import com.greensock.*;import com.greensock.easing.*;

var menu_items:Array = [news,party,club,artist,video,iapp,kontakt];

for (var i:int = 0; i< menu_items.length; i++){ menu_items[i].addEventListener(MouseEvent.ROLL_OVER,overHandler); menu_items[i].addEventListener(MouseEvent.ROLL_OUT,outHandler); menu_items[i].addEventListener(MouseEvent.CLICK,clickHandler ); menu_items[i].buttonMode = true;}

function overHandler(e:MouseEvent):void{ TweenLite.to(e.currentTarget,1,{x:0,ease:Bounce.easeOut});}function outHandler(e:MouseEvent):void{ TweenLite.to(e.currentTarget,1,{x:-168,ease:Bounce.easeOut});}

function clickHandler(e:MouseEvent ):void{ // TO DO ... site.gotoAndStop(e.currentTarget.name);}

D

Dynamiske elementer

site.fla-styringafmenuer


3. semester, 2011

Distortion PH We Rock Your World 18Kirsten Lynge Trefeldt

3. semester, 2011 Distortion PH Distortion PH Distortion

We Rock Your World

E

Distortio

n

PH We Rock

Your World


3. semester, 2011


E

IndledningDet udviklede designkoncept til Copenhagen Distortion be-står af en designmanual, som danner baggrund for visu-alisering af den grafiske brugerflade til en prototype på et nyhedssite og til en iphone-applikation. Med udgangspunkt i designmanualen er der endvidere udarbejdet forslag til nyt logo, merchandise og øvrigt promotionmateriale.

Det visuelle udtryk der er valgt til designkonceptet er Post-modernisme. Stilen er kendetegnet ved stærke og klare farver på detaljer, et bredt spektrum af mønstre, geometriske former som trekanter, firkanter og cirkler. Postmodernismen er ofte inspireret af storbynattens neonlys, hvilket harmo-nerer med Copenhagen Distortions festivalarrangementer.

En af Postmodernismens store eksponenter, Javier Maris-cal, er spansk kunstner og designer født 1950 i Valencia i Spanien. Han startede studier på Escuela de Elisava i Barcelona. Siden 1971 har han boet og arbejdet i Barce-lona. I 1989 åbnede Mariscal Estudio Mariscal. Mariscal som også er døbt ”Peter Pan af spansk design” favner et bredt spektrum af kreative evner fra skøre tegneserier over interiører/indretning, møbeldesign, grafisk design, maleri, skulptur, Urban Planning til havedesign og Corporate Iden-tity. Mariscals udtryksform er stærke farver og stor udtryks-fuldhed med få streger.

Designpriserogkunstprojekter

Mariscal er modtager af adskillige designpriser her iblandt den nationale pris for Design i 1999. Af kunst-projekter kan nævnes Gambrius – en kæmpe glasfi-ber hummer, som er placeret ved indgangen til havnen Passeig de Colom. I 1992 designede han Cobi – den officielle OL-maskot for OL i 1992. Hundemaskotten er nu den mest profitable maskot i historien. Senere designede han Corporate Image for Barcelona Zoo. I 1995 blev Alexandra-lænestolen tegnet. I 2002 de-signede han alt fra uniformer til facaden på Gran Hotel Domine Bilbao herunder også det grafiske billede og dets websted.


3. semester, 2011


Logo, logotype og 5. element 4 (21)

Farvepalette 5 (22)

Designelementer, mønstre og typografi 6 (23)

iphone-app 7 (24)

Merchandise 8 (25)

Plakat i fuld størrelse 9 (26)

Plakat i miljø 10 (27)

E

Indeks


3. semester, 2011


E

Logo, logotype og 5. element

Copenhagen Distortions nuværende logo er lidt for detaljeret og kaotisk at se på. På den baggrund er der udarbejdet forslag til nyt logo/logotype. Tanken med det nye logo er, at lave en forenkling samt illu-strere musikken, som er det bærende element gen-nem hele Distortion Festivalen. C’et for Copenhagen symboliseres derfor af en afbrækket CD/DVD. Logo-fonten Ariel er anvendt til logotypen.

LogofarveDet nye logo til Copenhagen Distortion er i farverne orange og sort. Nedenfor ses logoet også i gråtone, hvidt og sort.

SloganTil understøttelse af Logo og logotype er der ud-færdiget et slogan: “We Rock Your World”. Fonten skal højretilles under logotypen. Farvemæssigt kan Tagline-fonten stå i de forskellige designfarver, som det passer ind i fremtidige grafiske opgaver.

5.elementDer er udarbejdet en supergrafisk effekt i form af en hånd, der gør V-tegn. V-tegnet ses typisk, hvor der er unge mennesker til koncert eller festival. V-tegnet gør det ud for CPH Distortions 5. element.

5.element

Logo

Tagline/slogan

Distortion PH Distortion PH Distortion PH

Distortion PH We rock Your World


3. semester, 2011


E

Farvepalette

HSV: 11

100

100

RGB: 25

5 51

0

CMYK: 0 8

8 94

0

HEX: #ff

f3300

HSV: 17

9 100

40

RGB: 0

102

102

CMYK: 87

42 5

3 0

HEX: #0

0666

6

HSV: 16

3 100

80

RGB: 0

204

153

CMYK: 70

0 52

0

HEX: #0

0cc9

9

HSV: 17

9 10

0 0

RGB: 0

0 0

CMYK: 86

85 7

9 10

0

HEX: #0

0000

0

HSV: 17

9 0

100

RGB: 25

5 25

5 25

5

CMYK: 0 0

0 0

HEX: #ff

ffff

Farvesammensætning

I tråd med Copenhagen Distortion Festivals egne termer er farvepaletten udviklet til at repræsentere de fem kvarterer, der er en del af den 5-dage lange Distortion-fest. De rene farver anvendes både på site og grafisk brugerflade til Distortion-iphone-app.

Farvesammensætningen består af 3 tertiærfarver herudover en ren sort og en ren hvid. Den orange, mørkturkise og lysturkise er rene, klare og mættede farver uden brug af beskygning. Den varme rød- orange farve er blandet af den gule farves lys og den røde farves varme. De kølige turkise toner er blandet af lige dele grønt og blåt.

Farverelationer

De 3 kromatiske farver udgør en farveharmoni, da de ligger over for hinanden i den tolvdelte farvekreds, samtidig er de også komplementærfarver. Farvernes

valør, forøger i forbundethed strålekraften hos hin-anden.

Farveriforholdtilstilart

Farverne er i tråd med Postmodernismens stærke og klare pangfarver.

FarveriforholdtilKBHogmålgruppen

Den rødorange farve udstråler varme, kreativitet, strålekraft, sikkerhed og selvrespekt. De turkise toner symboliserer glæde og ungdommelighed, men også kølighed, beherskelse og sentimentalitet. De 3 farver tilfører projektet en energi, der matcher mål-grupen, som hovedsagelig hører til den yngre del af befolkningen. Karaktermæssigt består målgruppen af energiske, kreative og teknisk mindede menne-sker. De friske farvetoner antyder ungdom, kreati-vitet (kunst) og mobilitet.


3. semester, 2011


E

Designelementer, mønstre og typografi

DesignelementerSom designelementer anvendes skitser af menne-sker i bevægelse, musiksymboler og den super-grafiske effekt, som omtalt på side 4. Det, at festi-valen er mobil bliver blandt andet symboliseret ved silhouetter af mennesker i bevægelse.

TypografiSom typografi er fonten Arial valgt. Fonten, som er en grotesk/sans serif skrifttype, er en læsevenlig skrifttype i forhold til den eksisterende Courier New, som anvendes på sitet i dag. Overskrifter: Arial Regular 26 ptUnderoverskrifter: Arial Bold 12 pt /14ptBrødtekst: Arial Regular 10 pt

Font name: Arial

Version: Version 5.06

OpenType Layout, Digitally Signed, TrueType Outlines

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890.:,; ' " (!?) +-*/=

12The quick brown fox jumps over the lazy dog. 1234567890

18 The quick brown fox jumps over the lazy dog. 1234567

24 The quick brown fox jumps over the lazy

36 The quick brown fox jumps

48 The quick brown fox

60 The quick brown

72 The quick bro

Arial Regular 26 pt ArialBold12pt

Arial Regular 10 pt


3. semester, 2011


E

CPH Distortion iphone-app

GrafiskbrugerfladeDen grafiske brugerflade til iphoneapplikationen er udviklet i overensstemmelse med de visuelle ele-menter i designmanualen.

Ikoneriphone-ikonerne er skabt i tråd med de valgte de-signelementer i designmanualen og symboliseres af silhouettegninger. Det gennemgående farvevalg til applikationer er hvid, sort og de turkise toner i farvepaletten.

TypografiI overensstemmelse med site og andet materiale i det visuelle koncept, er fonten Arial valgt til anven-delse på brugerfladen.

LogoDet nye logo er placeret øverst i venstre side af time-baren på iphone-brugerfladen.


AT&T 3G

Distortion PH


Dist

ortio

n

PH Dist

ortio



GALLERYlGALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALERY

GALLERYGALLERYl

GALLERYGALLlERY

GALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALLERYl

GALLERY

PHOTOSPHOTOS


IMAGESPHOTOS IMAGES

PHOTOS IMAGES


Gallery

PHOTOSPHOTOS


GALLERYlGALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALERY

GALLERYGALLERYl

GALLERYGALLlERY

GALLERYl

GALLERYGALLERY

GALLERYGALLERY

GALLERYGALLERYl

GALLERY

PHOTOSPHOTOS


IMAGESPHOTOS IMAGES

PHOTOS IMAGES


Dist

ortio

n

PH Dist

ortio

n


3. semester, 2011


E

Merchandise

Sodacan T-shirt

SunglasesBadges

Umbrella


AT&T 3G

Distortion

PH


AT&T 3G

Distortion

PH

Dist

ortio

n

PH

We Rock Your Worldwww. cphdistortion.dk

26

EE


AT&T 3G

Distortion

PH


AT&T 3G

Distortion

PH

Dist

ortio

n

PH

We Rock Your Worldwww. cphdistortion.dk

27

E

Designinspiration-PostmodernismePlakaten, der udelukkende er udarbejdet i Illustra-tor, er inspireret af Postmodernismen. Farver og de-signelementer fra Copenhagen Distortions design-manual er anvendt.

EksponeringEksponeringen foregår både på husfacader i København, men også i tog og busser.

28


E


3. semester, 2011


TREATMENT

SynopsisPremise(internal):

“In Denmark it often rains and storms, but at a little spot in the center of Copenhagen The Sun always shine - We call it The Copenhagen Distortion Festival Syndrome”.

Slogan: “We Rock Your World”

TheConceptA very brief summary of the theme and basic story outline of the video you will do. - Aprox. 10 lines.

Temaet handler om at formidle feststemning, kulturoplevelse, glæde generelt og musikglæde.

TreatmentStepoutline:A brief description of the dramatic elements and progression in the story. -Aprox 1 page.

Videoen er udarbejdet som en animatic, der handlingsmæssigt tager udgangspunkt i storyboardet og viser 8 scener med fiktive stemningsbilleder fra en Copenhagen Distortion Festival. Animationen er såvidt muligt tilpasset rytmen i underlægningsmusikken. Indledningsvist er der uvejr over København, som går over i strålende solskin, der symboliserer festivalglæden for herefter at gennemgå de øvrige 6 scener med stemningsindtryk fra festivalen. Slutscenen, der igen er uvejrstruet visualiseres af en tom sodavandsdåse, der kommer trillende fra long distance og stopper i et closeup, så Copenhagen Distortions logo ses på sodavandens label. Slutscenen er tænkt som symbolisering af festivalens afslutning.

Audiodelen indeholder indledningsspeak og underlægningsmusik, som udgøres af lydsporet fra en Copen-hagen Distortion Video. Herudover er der anvendt lydeffekter, som regn, torden, fuglesang, lyd fra menne-skemængde og lyd fra rullende tom sodavandsdåse.

CameraPlanningScenedescription&location:Medium closeup af fiktiv bydel i København, af festivalgæster og rockende menneskemængde, closeups af unge festivalgæster og artist. Longdistance shot af rullende sodavandsdåse indtil closeup og end of story. Nærværende afspejles i storyboardet.

LocationsKøbenhavn - indre by.

Producingteam: Kirsten Lynge Trefeldt Business: FestivalCompletiondeadline: 6. juni 2011 Contactinfo.:[email protected]

Projecttitle: CPH Distortion Festival Clientname: Copenhagen Distortion

F


3. semester, 2011


STORYBOARD

Picture Text Sound

Scene3

Festivalplads med scene, menneske-hav (baggrund og mellemgrund). I Forgrunden bevæger alle typer mennesker sig i begge retninger.

Koncertlyd + mennesker - medum low.

Scene2

Solen står op over byens tage. Blå himmel og stilhed.

Fuglekvidder Festivallyd: Copenhagen Distortion Festival video-lyd - kommer langt fra, og bliver højere og højere.

Scene1

Tordenvejr, regn blæst over byens tage

Torden, blæst og regn.

Speak: In Denmark it often rains and storms, but at a little spot in the center of Copenhagen The Sun always shine - we call it The Copenhagen Distortion Festival syndrome.

Scene4

Medium closeup af menneskehav med hænder oppe - rocker.

Crowd, pift hujen - high.

Title:Copenhagen Distortion Festival Dato:06-06-2011

Copenhagen Distortion2011

G



3. semester, 2011


STORYBOARD

Picture Text Sound

Title:Copenhagen Distortion Festival Dato:06-06-2011

Scene7

Scene 4 gentages Medium closeup af menneskehav med hænder oppe - rocker

Rockkoncert

Sound:Kun vind

Scene8

Copenhagen Distortion sodavandsdåse kommer rullende fra longdistance til closeup. Stop-per foran kamera navn og logo ses tydeligt. Evt. mov-ing text.

Scene6

Closeup af scene og syngende/spil-lende artist med mikrofon

Copenhagen Distortion Sound song - high.

Scene5

To glade unge m. en vand med Distortion-label i den ene hånd giver V-tegn til kamera med den anden hånd.

Copenhagen Distortion Festivallyd.

G


3. semester, 2011


Visualisering

Mobile interfacedesign er anvendt i forbindelse med

udvikling af iphone-app.

Mobileinteraktionogbrugervenlighed

Elementerne er anvendt i forb. med iphone og site.

KommunikationRetorikogonlineethos

Der kommunikeres i korte resumeer med link til dyb-

degående information. Sitet fokuserer på at skabe et

realistisk stemningsbillede af festivalen.

Socialenetværk

Der er oprettet sites på Facebook og Twitter til

formålet og der linkes til og fra site og sociale medier.

Dramaturgioghistoriefortælling

De obligatoriske elementer er anvendt i forb. med

skabelsen af animatic, jf. storyboard og synopsis.

Organisation,4.udgaveaf H. Kjær, H.J. Skriver og E. Staunstrup

Storytelling–brandingipraksis,2.udgave2009af K. Fog, C. Budtz og P. Munch

5.1ObligatoriskeelementerInteraktion

Opmærkning og CSS er anvendt til newssite og

geolocation. Til udvikling af de 2 separate sites er

der anvendt navigationsdiagram og boksstrukturdia-

gram.

Geolocation

Via sitet linkes til et undersite udarbejdet i xhtml med

et integreret Googlemap. Pt. inkluderer kortet kun

adressen på CPH Distortion. Meningen er, at det

skal inkludere alle festivalevent lokationerne.

Introtilvideo/audioredigering

Elementerne er anvendt i udarbejdelsen af animatic

Skitseringogudviklingsproces

Der er anvendt digitale mock-ups til iphone-app.

LitteraturlisteKapitel 5

CPH Distortion

Documents

Transcript of CPH Distortion