* 10 casestudier for applikationer og webprojekter. Koncept, design, programmering, frontend, backend og projektledelse fra start til slut. Fuld service for bureauer og direkte service til kunder. *
*
10 casestudier for applikationer og webprojekter. Koncept, design, programmering, frontend,
backend og projektledelse fra start til slut. Fuld service for bureauer og direkte
service til kunder.
*
03
Procreate ledes af projektleder Tine Hyllested, kreativ direktørDavid Earle og teknisk udvikler Per Dalgaard.
Vi har sammen udviklet en række projekter, både fra bunden ogsom serviceleverandører til andre. Vi har valgt ti af vores nyeste
projekter,som vi mener viser bredden af vores ekspertise.
FOOTPRINT DIARY SMARTPHONE APP 4
KøbENHAvNS ENERgI 6
HOMERUN gROUP 8
SUNDDIALOg 10
PRSS FOR CHANgE 12
E-MISSIONEN 14
POST & TELE MUSEUM 16
AgENT FOOTPRINT 18
PACKSHOT FACTORY 20
FOOTPRINT DIARY WEbSITE 22
FOOTPRINT DIARY bACKEND SYSTEM 24
HOMERUN gROUP CMS SYSTEM 26
© Copyright David Earle 2008-2011
04
Casestudie 1 : FOOTPRINT DIARY SMARTPHONE APP
FOOTPRINT DIARYSMARTPHONE APP
Footprint Diary er en gratis applikation til smartphone og web, der ved hjælp af en beregner giver brugerne et indblik i deres personlige vandforbrug og CO2 udledning. samtidig informerer applikationen om klimaforandringernes konsekvenser i udviklingslande, gennem historier om mennesker der allerede er påvirket af klimaforandringerne. applikationen hjælper brugeren til, skridt for skridt, at reducere deres personlige forbrug, ved at motivere og opmuntre til at sætte individuelle mål.
Hovedmenu. Footprint diary fokuserer på fire områder af den personlige forbrug: varme, elektricitet, vand og transport. Hovedmenuen har også links til grafer, personlige mål og klimahistorier fra forskellige NGO’er.
Profilsektion. Profilsektionen indeholder spørgsmål om hvor i landet brugeren bor, hvilken type bolig brugeren bor i, hvor mange der er i husstanden, hvor stor og hvor gammel boligen er, hvilken type vinduer boligen har og hvilken type varmekilde der er i boligen.
de svar brugerne giver, påvirker automatisk hvilke spørgsmål der stilles i applikationens andre sektioner.
Status. For hvert resultat brugeren opnår vises der en status, ved hjælp af farvekoder. Rød betyder, at “du kan opnå en stor effekt ved at foretage en enkelt reduktion her”, orange betyder, at “du kan opnå en betydelig effekt ved at reducere her”, mens grøn betyder, at “du skal fokusere på de røde og orange områder først, hvis du vil have den største effekt”.
05
Casestudie 1 : FOOTPRINT DIARY SMARTPHONE APP
FOOTPRINT DIARYSMARTPHONE APP
Projektbeskrivelse: applikation til smartphone, der giver brugerne
mulighed for at måle, sætte mål og kontrollere deres CO2-udledning og vandforbrug dag for dag.
Bestilling:
Koncept, grafisk design, programmering, backend-design, projektledelse, levering.
Kunde- og projektledelse: Footprint diary / iBis
© Copyright David Earle 2008-2011
06
Casestudie 2 : KøbENHAvNS ENERgI – INTERAKTIvE TOucHScREENS
Københavns Energi havde brug for en serie interaktive touch-screens, som kunne blive den centrale del af deres moderne, nye hovedkontor i København. Med et ønske om et mix af, at styrke Ke brandet, kommunikation og yde kundeservice, skulle vi fortolke det eksisterende brand således, at det kunne inte-greres som en del af touchscreen applikationerne.
Navigationshjulene (eksemplet til højre) er udviklet således at de afspejler Ke’s logo, og på samme tid er intuitive nok til at
en førstegangs besøgende vil være i stand til at benytte og forstå de forskellige skærme i atriumet. Projektet blev udviklet før touch enheder som iPhone var lanceret, og derfor skulle der tages særligt hensyn til, at lave et brugervenlig interface så også dem der ikke var fortrolige med teknologien, uden proble-mer kunne benytte det.
07
Casestudie 2 : KøbENHAvNS ENERgI – INTERAKTIvE TOucHScREENS
KøbENHAvNS ENERgI
Projektbeskrivelse: interaktive touchscreen-displays til
receptionen og atriet i Ke’s hovedkontor, København.
Bestilling: Grafiske interface, Flashprogrammering
til endelig levering.
Kunde- og projektledelse: Homerun Group.
© Copyright David Earle 2008-2011
08
Casestudie 3 : HOMERuN gROuP – FlASH WEbSITE
efter afslutningen af et fuldstændig re-design af Homeruns identitet (af David Earle), fik vi til opgave at bygge et skræddersyet system, som ville gøre det nemt for Homerun Group at opdatere deres online portefølje.
Frontend-designet er baseret på et modulært format, som gør det simpelt i fremtiden at tilføje elementer nemt og hurtigt, samtidig med at brandets nye udseende bevares. Backend-systemet kan benyttes uden forudgående træning, hvilket
betyder at alle kan redigere den flashbaseret frontend. Navi-gationen bruger traditionelle dropdown menuer, hvis brugeren ønsker at se på specifikke emner eller services. Dem, der foretrækker at browse i diverse nyere projekter, kan bruge rul-lepanelet i bunden, som giver brugerne mulighed for at se det visuelle indhold hurtigt. eftersom Homerun præsenterer deres touchscreen løsninger på mange udstillinger, er hele sitet lavet så det er velfungerende i en touchscreen sammenhæng, f.eks. udstyret med store knapper til at navigere rundt på sitet.
09
Casestudie 3 : HOMERuN gROuP – FlASH WEbSITE
HOMERuNFlASH WEbSITE
Projektbeskrivelse: Præsentation, portefølje og
informationswebsite for film og interaktiv mediefirma Homerun Group.
Bestilling: Design af virksomhedsidentitet, grafisk
design, Flashprogrammering, backend-design til endelig levering.
Kunde- og projektledelse: Homerun Group.
© Copyright David Earle 2008-2011
10
Casestudie 4 : SuNDDIAlOg FlASH WEbSITE
Sunddialog har udviklet komplekse softwaresystemer og arbejdsmetoder til at hjælpe patienter og sundhedsmedarbejdere med at engagere sig i en dialog, som vil fører til en højere helbredelsesprocent og forbedre den generelle velvære.
temaet dialog er brugt som et centralt koncept i designet af websitet. For at tage hensyn til, at sitet skal kommunikere komplekse systemer med både patienter og fagfolk på
sundhedsområdet, introduceres de generelle koncepter først i en “mild” form ved at bruge korte flash-introer og derefter følger mere detaljeret information. det var yderst vigtigt for designet, at sunddialog fremstår både seriøs og videnskabelig, men også menneskelig og omsorgsfuld. Hver side er derfor et forsøg på at balancere mellem de to temaer.
11
Casestudie 4 : SuNDDIAlOg FlASH WEbSITE
SuNDDIAlOgFlASH WEbSITE
Projektbeskrivelse: informationssite med indgangspunkter
for både patienter og fagfolk på sundhedsområdet.
Bestilling: Design og arkitektur, grafiske interface,
Flashprogrammering til endelig levering.
Kunde- og projektledelse: sunddialog a/s.
© Copyright David Earle 2008-2011
12
Casestudie 5 : PRSS FOR cHANgE SMARTPHONE APP
pRSS for Change er et værktøj der giver NGO’er, organisationer, nyhedsbureauer mm. en mulighed for bedre og billigere at kommunikere med både deres kernekunder samt et nyt publikum, lige når de ønsker det. pRss for Change består af to applikationer – en Rss ‘news feed’ applikation, der er tilpasset og designet til den specifikke organisation, samt en mere generel applikation hvor alle organisationerne er repræsenteret. Brugeren har mulighed for at abonnere på en organisation og/eller for at se historier, events, job opslag,
fra alle de deltagende NGO’er, organisationer, nyhedbureauer mm. For at en applikation som pRss for Change kan bliver en succes, er det altafgørende at organisationerne med et minimum af ressourcer kan opdatere og uploade de relevante data.
applikationen er derfor lavet med et stærkt kerne design, som gør det nemt at tilpasse den til de enkelte organisationer og opgradere den over tid.
Ovenover: eksempel på hvordan hoved-applikation “pRss for Change” viser nyheder fra en lang række organisationer. Brugerne kan filtrere og gemme foretrukne typer historier, som applikationer leverer. Brugerne kan også vælge en push-teknologi, hvis der ønskes informationer om specifikke emner.
Ovenover: eksempel på pRss for Change der er tilpasset en specifik organisationen (her
udviklingsorganisationen iBis) og eksempler på de typer historier og information, som
applikationer leverer. efter organisationens ønske, kan tredje parts organisationer også
levere materialer gennem applikationen.
13
Casestudie 5 : PRSS FOR cHANgE SMARTPHONE APP
PRSS FOR cHANgESMARTPHONE APP
Projektbeskrivelse: applikation til smartphone for diverse
NGO’er og mediebureauer.
Bestilling: Koncept, grafisk design, programmering, backend-design, projektledelse, levering.
Kunde- og projektledelse: Footprint diary / iBis.
© Copyright David Earle 2008-2011
14
Casestudie 6 : E-MISSIONEN ONlINE SPIl
Post & Tele Museum har opnået positive resultater på under-visningsområdet, især med skoler. Med henblik på at hjælpe studerende med at forstå deres rolle i det moderne samfund og deres ansvar som forbrugere, har de udviklet ‘e-missionen’
– et online spil, hvor forskellige klasser rundt i danmark kan konkurrere mod hinanden og lære i processen.
spillet foregår i det designede industrielle bymiljø, som ‘rengøres’ i løbet af spillet, hvis spilleren træffer de rigtige
valg. Det var vigtigt at det grafiske design ville tiltrække både drenge og piger, og det var nødvendigt at finde balance mellem at være tiltrækkende og oplysende for at sikre at spillet bliver benyttet.
each variable can be simply edited if there is new data forthcoming.
15
Casestudie 6 : E-MISSIONEN ONlINE SPIl
E-MISSIONENONlINE SPIl
Projektbeskrivelse:en serie af ni touchscreen stationer til en permanent udstilling, Post og tele
Museum, København
Bestilling:Grafiske interface, Flashprogrammering
til endelig levering.
Kunde- og projektledelse:Homerun Group.
KO
M
-CITY
0 1
© Copyright David Earle 2008-2011
16
Casestudie 7 : POST & TElE MuSEuM – 9 INTERAcTIvE TOucHScREENS
POST & TElEMuSEuM
som led i fornyelsen af museets permanente udstilling i det centrale København, blev der bestilt 9 forskellige stationer med touchscreen. stationerne skulle både være oplysende og underholdende og udformet således, at personer med forskellige grader af tekniske færdigheder og i forskellige aldre skulle kunne bruge dem på en meningsfuld måde.
den centrale del var et kompashjul, som kunne aktivere links blot ved at dreje hjulet og derved pege. samtidig blev også
mere konventionelle navigationsmetoder anvendt, så brugerne selv kunne bestemme hvilke de ville benytte. designet skulle kunne rumme over 200 skærmbilleder, der anvender kildemateriale af varieret kvalitet og samtidigt kunne holde den generelle stil intakt.
17
Casestudie 7 : POST & TElE MuSEuM – 9 INTERAcTIvE TOucHScREENS
POST & TElEMuSEuM
Projektbeskrivelse: en serie af 9 stationer med touch-
screens til en permanent udstilling, Post & tele Museum, København.
Bestilling: Grafiske interface, Flashprogrammering
til endelig levering.
Kunde- og projektledelse: Homerun Group.
© Copyright David Earle 2008-2011
18
Casestudie 8 : AgENT FOOTPRINT – WEb-bASERET uNDERvISNINgSMATERIAlE
Agent Footprint – et nyt og spændende undervisningsmate-riale om klima og bæredygtig udvikling. Materialet er web-baseret, og målgruppen er mellemtrinnet 4 – 6 klasse. Vi ved, at mange børn på disse klassetrin er meget optaget af de store klimaspørgsmål. Materialet er bygget op, så eleverne får mulighed for at være deres egen ‘agent for forandring’. indholdet er udvalgt og tilpasset de ting, som børn gør i deres hverdag. agent Footprint henvender sig til eleverne individuelt (de kan beregne deres private CO2 udslip og vandforbrug og
sætte sig egne mål) og kollektivt, idet materialet lægger op til, at en klasse i fællesskab sætter sig mål. det er også i klassen, de vigtige diskussioner og refleksioner finder sted.
19
Casestudie 8 : AgENT FOOTPRINT – WEb-bASERET uNDERvISNINgSMATERIAlE
AgENT FOOTPRINT læREMATERIElE
Projektbeskrivelse:Web-baseret undervisningsmateriale
Bestilling:Koncept, grafisk design,
backend-design, projektledelse, spil design, Flashprogrammering til
endelig levering.
Kunde- og projektledelse:Footprint diary / iBis /
undervisningsministeriet
© Copyright David Earle 2008-2011
20
Casestudie 9 : PAcKSHOT FAcTORY WEbSITE
Ligesom Homerun Group, havde Packshot Factory brug for en løsning, der ville gøre det både let at opdatere deres billeder og bevare et stærkt, tiltalende visuelt format. det skulle være nemt både at søge i billederne og ”tagge” dem, så brugerne kunne filtrere gennem de tusinder af tilgængelige billeder.
Resultatet er et billede-drevet site, der i høj grad også kan kontekstualiseres efter brugerens behov. Navigationsdesignet
bruger firmaets prikker og farver til at lave en serie ikoner, som er både synlige og enkle, men som ikke distraherer brugerne fra selve produktet, dvs. billederne eftersom mange af kunderne selv var billedeksperter, skulle sitet finde balance mellem at være en attraktiv portefølje og et seriøst værktøj.
21
Casestudie 9 : PAcKSHOT FAcTORY WEbSITE
PAcKSHOT FAcTORY WEbSITE
Projekt beskrivelse:Flash-baseret portefølje-site for en
af storbritanniens største udbyder af produkt fotografering.
Bestilling:Grafiske interface,
Flashprogrammering, backend-design, programmering til endelig levering.
Kunde- og projektledelse:Packshot Factory
© Copyright David Earle 2008-2011
22
Case study 10 : cMS-bASERET FlERE-SPROgET WEbSITE
det historiebaserede backend-system til web-sitet Footprint Diary, der bygger på Drupal CMS system, kan håndtere flere sprog, således at hvert lands lokale site kan filtrere de rigtige historier og sprog.
systemet kan også justere historierne, så de tilpasses forskellige typer enheder, herunder forskellige former for smartphones og selve Footprint diary applikationen. CMs systemet er robust nok til at man kan uploade billeder og
videoer og simpel nok til at en gennemsnitlig bruger kan uploade sine egne historier uden at de skal igennem en omfattende tilpasning.
23
Case study 10 : cMS-bASERET FlERE-SPROgET WEbSITE
FOOTPRINT DIARY WEbSITE
Projektbeskrivelse:CMS-baseret flere-sproget website.
Bestilling:Koncept, grafisk design,
programmering, backend-design,projektledelse, levering.
Kunde- og projektledelse:Footprint diary / iBis
© Copyright David Earle 2008-2011
24
BaCKeNd Casestudie a : FOOTPRINT DIARY APP – bAcKEND SYSTEM
en uafhængig backend løsning, hvorfra brugerne kan udvikle smartphone applikationssider der indeholder komplekse algoritmer, interaktiv grafik, regneark og resultater i ‘real-time’ og på hvilket som helst sprog.
denne løsning er designet til at være ‘fremtidssikret’ til når nye smartphones og operativsystemer bliver introduceret, så vil backend’en kører en dedikeret app på telefonen i stedet for at lave komplekse løsninger hver gang udstyret eller
operativsystemet udskiftes. Data, grafik, og algoritmer bliver input via backend’en. Brugeren kan let lave nye sider, der kan lave komplekse udregninger og samtidig skaber et dynamisk resultat.
Hver variabel kan let blive ændret hvis der kommer ny data.
sidebeskrivelserne indeholder sidens interaktioner og er delt op i typer af sider.
alle beskrivelser af variabler er på engelsk i backend’en for at sikre overensstemmelse.
2 3
3
1
1
2
25
BaCKeNd Casestudie a : FOOTPRINT DIARY APP – bAcKEND SYSTEM
FOOTPRINT DIARYbAcKEND SYSTEM
en dropdown menu gør det muligt for administra-toren at vælge hvilken type side og derved den type information der behøves og sidestilen.
Når ændringer er gemt, bliver siden applikeret på alle enheder.
administrator kan let skrive (i hvilket som helst sprog) den tekst der skal komme frem på en site.
Grafiske elementer kan vælges fra online biblioteket der forsynes med ikoner og billeder af Footprint diary designteamet.
4
5
5
7
7
4
6
6
© Copyright David Earle 2008-2011
26
BaCKeNd Casestudie B : HOMERuN gROuP WEbSITE – FlASH bAcKEND
En special bygget backend. Backend til Homerun sitet er som frontenden lavet i flash. Det er modulært opbygget med vinduer der kan åbnes og lukkes hvilket gør det muligt at have lige præcis de dele åbent som man arbejder med. det er muligt at genere nyt indhold samt editere det eksisterende. alt fra menu strukturen til de enkelte siders tekst, farver, baggrunde og slideshows kan ændres på en intuitiv og visuel måde. det er muligt at ‘preview’ de enkelte dele inden man gemmer ændringerne.
som en lille gimmick er det muligtat have en baggrund (billede eller video) i backenden.
Her vælger man hvilke områder af sitet man vil bearbejde.
det er muligt at ‘preview’ billeder der skal uploades før man gemmer ændringerne.
de enkelte vinduer kan stables og vil komme forrest når de er i fokus, præcis som brugeren er vant til fra styresystemerne.
sidebeskrivelsen indeholder sidens interaktioner og er delt op i typer af sider.
2
4
2
3
4
5
3
5
1
1
27
BaCKeNd Casestudie B : HOMERuN gROuP WEbSITE – FlASH bAcKEND
HOMERuN gROuPFlASH bAcKEND
det er muligt at indsætte nyheder påsitet, der vil blive vist på forsiden.
de enkelte områder på sitet har en farvekode, denne kan vælges ud fra en af designets foruddefineret palette, eller defineres hel manuelt med en Hex værdi.
6
7
6
7
Contakt: Tine Hyllested, projektleder. Tlf. 26 34 60 34, David Earle, kreativ direktør, tlf. 23618232.
Procreate38 Sølvgade 38 G, 1 Sal.
1307 Københaven [email protected]