Procreate Portfolio

*

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


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.


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.



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.


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.


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


Kunde- og projektledelse:Homerun Group.

KO

M

-CITY

0 1


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




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


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


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


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


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]

Documents

Procreate Portfolio