Download - 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
Distortion PH We Rock Your World
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
5Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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.
6 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
Kirsten Lynge Trefeldt
7Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
8 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
Kirsten Lynge Trefeldt
9Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
10 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
22:35Monday, June 6, 2011
AT&T 3G
Distortion PH
Dist
ortio
n
PH W
e Roc
k You
r Wor
ld
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
Kanal Chillout og efterfestFrederiksholms Kanal 4Chillout: 14:00 - 22:00Efterfest: 22:00 - 04:00Fri Entré
Kanal Chillout og efterfestFrederiksholms Kanal 4Chillout: 14:00 - 22:00Efterfest: 22:00 - 04:00Fri Entré
Kanal Chillout og efterfestFrederiksholms Kanal 4Chillout: 14:00 - 22:00Efterfest: 22:00 - 04:00Fri Entré
Kanal Chillout og efterfestFrederiksholms Kanal 4Chillout: 14:00 - 22:00Efterfest: 22:00 - 04:00Fri Entré
Distortion News
Kirsten Lynge Trefeldt
11Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
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
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
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
Gallery
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
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
12 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
Kirsten Lynge Trefeldt
13Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
TillægKapitel 4
A GANT-korttilprojektstyringB NavigationsdiagramC BoksstrukturdiagramD DynamiskeelementerE DesignmanualF Synopsis/treatment(animatic)G Storyboard
14 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
Kirsten Lynge Trefeldt
15Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
16 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
Kirsten Lynge Trefeldt
17Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
18Kirsten Lynge Trefeldt
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
19 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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.
20Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
21 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
22Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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.
23 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
24Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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.
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
Gallery
PHOTOSPHOTOS
IMAGES IMAGES IMAGESGALLERY
GALLERYlGALLERYl
GALLERYGALLERY
GALLERYGALLERY
GALLERYGALERY
GALLERYGALLERYl
GALLERYGALLlERY
GALLERYl
GALLERYGALLERY
GALLERYGALLERY
GALLERYGALLERYl
GALLERY
PHOTOSPHOTOS
IMAGESPHOTOS IMAGESPHOTOSPHOTOS
IMAGESPHOTOS IMAGES
PHOTOS IMAGES
PHOTOSPHOTOS IMAGESPHOTOS
Dist
ortio
n
PH Dist
ortio
n
25 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
E
Merchandise
Sodacan T-shirt
SunglasesBadges
Umbrella
22:35Monday, June 6, 2011
AT&T 3G
Distortion
PH
22:35Monday, June 6, 2011
AT&T 3G
Distortion
PH
Dist
ortio
n
PH
We Rock Your Worldwww. cphdistortion.dk
26
EE
22:35Monday, June 6, 2011
AT&T 3G
Distortion
PH
22:35Monday, June 6, 2011
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
Distortion PH We Rock Your World
E
29Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
30 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
Kirsten Lynge Trefeldt
31Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
32 Kirsten Lynge Trefeldt
3. semester, 2011
Distortion PH We Rock Your World
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
Kirsten Lynge Trefeldt
Distortion PH We Rock Your World