Issuu on Google+

ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~1~

Skt. Clemens Drengekors hjemmeside Eksamensprojekt i faget ”MULTIMEDIETEKNOLOGI OG INTERAKTIONSDESIGN” under Erhvervsakademi Aarhus, kursus i perioden 5. maj til 15. juni (Team: Inge, Birgit, Rainer, Preben) http://multimediekursus.ats.dk/1811/birgit/wp/wp-admin login: admin brugernavn: projekt

Indholdsoversigt I Foranalyse ................................................................................................. 1 Ia Kundemøde ......................................................................................... 2 Ib Informationsindsamling ..................................................................... 2 Ic Projektbeskrivelse ............................................................................... 3 II Undersøgelse............................................................................................ 4 kommunikationsplan .............................................................................. 4 III Design (Informations-, Interaktions- og præsentationsdesign) ............ 5 IIIa Informationsdesign .......................................................................... 5 IIIb Interaktionsdesign ........................................................................... 7 IIIc Præsentationsdesign......................................................................... 8 IV Realisering ............................................................................................ 10

I Foranalyse


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~2~

Vi dannede vores team før vi kendte det konkrete projekt på grundlag af en vurdering af, at vi hver især besad såvel almene som særlige kompetencer fagligt og generelt, som ville være et godt grundlag at gennemføre projektet på.

Ia Kundemøde Mandag den 30. maj fik vi kl. 09.00 at vide, at kunden var Skt. Clemens Drengekor repræsenteret af korlederen og et seniormedlem. Kunden har en hjemmeside, men ønsker en gennemgribende revision af denne. Kunden forelægger en række ønsker til hjemmesiden: • • • • •

• • • •

Hverve nye kormedlemmer (i alderen 8 – 13 år) Være korets ansigt til offentligheden Oplyse om kommende begivenheder Fortælle om korets tidligere aktiviteter Fungere som internt kommunikationsinstrument i et eller andet omfang, herunder en fællesmail: ...@koret.dk, hvor der oprettes en fællesmail og en mail til de enkelte ”ledere” og korister Oplyse om korets organisation og bestyrelse og foreningsgrundlag Links til samarbejdspartnere Vise korets bidragsydere og sponsorer Gerne nyt logo

I den efterfølgende dialog med kunden forsøgte vi at hjælpe ham til at afklare, hvad det overordnede formål med hjemmesiden egentlig skal være, og kunden nåede frem til at fastslå, at det overordnede formål er ”at hverve nye medlemmer”, men så hjemmesiden udformes, således at de øvrige formål tilgodeses så godt som muligt.

Ib Informationsindsamling


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~3~

Teamet gennemså derefter kundens eksisterende hjemmeside og analyserede styrke og svagheder, og gennemså så andre danske drengekors hjemmesider og dannede sig et indtryk af, hvad der udgør et drengekors aktiviteter og hvilke funktioner der hører med til dets virksomhed.

Ic Projektbeskrivelse Teamet udarbejdede den første projektskitse, der bl.a. indeholdt: • Siden skal opbygges enkelt i såvel ydre fremtoning som i funktionalitet • Skal samtidig være opmærksomhedsfangende og motiverende • Siden skal produceres i WordPress med anvendelse af Atahualpa skabelonen • Der blev til den videre proces uddelegeret opgaver efter de enkelte teammedlemmers særlige kompetencer (Inge skulle finde forslag til nyt logo, og de øvrige hver især forelægge dele til næste fællesmøde, og alle skulle øge deres kompetence i brug af Atahualpa skabelonen og fortsætte researchen til det konkrete projekt. • Der blev udarbejdet en tidsplan (se bilag 0)


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~4~

II Undersøgelse Ideudviklingen tog udgangspunkt i den udførte research og i en mindmapping. Dette arbejde mundede ud i følgende

kommunikationsplan: Primær målgruppe er eventuelle nye kormedlemmer. Her gør der sig det gældende, at den første modtagergruppe formodentlig ofte er forældre, hvis interesse skal fanges, så de motiveres til at foreslå deres barn at blive medlem og derefter viser siden til deres drenge, hvis interesse derefter skal vækkes med hjemmesiden som (et) middel, så han agerer med en tilmeldelse til optagelsesprøve. sekundære målgrupper • • • • • •

Koncertgængere og klassisk musikinteresserede Pressen Andre kor Det kirkelige bagland Familiemedlemmer, bedsteforældre osv, og venner Koret internt – vedligeholde og styrke samhørighed og kommunikation (og se sig selv)

brugerprofilerne er lige så forskellige som målgrupperne, hvilket tilsiger, at modtagermedierne skal kunne være så mangfoldige som mulige, pc, mac, tablets, smartphones osv. De unge vil bruge smartphones, koncertgængerne tæller sikkert teknologiske dinosaurer, der sidder med en Commodore 64 og uopdateret browser.


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~5~

afsenderen, ”Sct. Clemens Drengekor” skal fremstå som nutidig, frisk og afslappet og tilgængelig for alle og samtidig også som absolut seriøs – (billeder af korets ledere og medlemmer i afslappede situationer under øvelse eller på turne og i koncertaktivitet i dyb koncentration og alvor. Koret har baggrund i Århus Musikskole og Domkirken. De evt. kommende medlemmer og deres forældre skal fornemme, at det både er sjovt og et godt fællesskab med nye venner, men at det også er noder og optagelsesprøve og sangundervisning, som så belønnes med erhvervelse af ikke blot gode fritidsoplevelser men på sigt også med anerkendte nyttige kompetencer. Kommunikationsmiljøet, som hjemmesiden indgår i er Musikskolens program og annoncering og Domsognets kirkeblad, samt egen dagbladsannoncering og plakatophængning, som den i sitets nyhedsrubrik kan understøtte ved at gengive en aktuel plakat osv., og iøvrigt koordineres med i muligt og ønsket omfang.

III Design (Informations-, Interaktions- og præsentationsdesign) IIIa Informationsdesign Den primære målgruppe skal kunne finde de søgte informationer allerede på forsiden. Informationerne her skal i vidt omfang bestå af billeder. Forsiden skal signalere, at her er et spændende og udfordrende sangkor.


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~6~

Ud fra overvejelser om opmærksomhedsniveauer besluttes det, at forsidens header øverst skal have et større billedbanner som logo, således at billedets tyngdepunkt bliver til venstre i sidens øverste venstre hjørne og så fade ud mod højre.

Under headeren midtstillet i bodydelen et galleri med slide-show [1 Flash Gallery] med iøjnefaldende fotos af kormedlemmerne og situationer fra koncerter og rejser, hvor brugeren kan forny billedmaterialet løbende.

Der indsættes en medieknap til video, med teksten: ”Se og hør koret”, idet der allerede eksisterer klip fra korets koncerter på YouTube og idet koret planlægger at producere en præsentationsvideo med en koncertoptagelse. En sådan video vil selvsagt informere mere om koret end mange ord.

Undersidemenuen skal udformes i den vandrette bjælke nederst i headeren, så den mest fremtrædende 1. underside får titlen: ”Noget for dig?”, evt. thumbnail af syngende korist som kan klikkes på, altså en side med information rettet til barnet/den unge der fortæller om fællesskab og godt socialt samvær og også oplyser om, at der skal ydes en indsats med øvelser og undervisning. Undersiden hertil bliver ”Noget for dit barn?”, som giver de informationer forældre har brug for. De øvrige undersider kommer til at afspejle de meget forskelligartede målgruppers informationsbehov:

• Undervisere og ledere – der præsenterer den professionelle stab som en information til både kommende korister og deres forældre og til øvrige målgrupper • Kommende Koncerter, nyheder og kalender: Information til koret og til offentligheden om fremtiden • Billedarkiv • Koncertomtale, med anmeldelser og medieomtale: Information om avisanmelser og anden medieomtale. På sitet skal der indsættes en indlægs-widget der giver koncertgængere mulig-


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~7~

hed for at rose korets koncerter. Disse informationer er til såvel kormedlemmerne som offentligheden. • Om koret, herunder vedtægter og bestyrelsen. De officielle data om koret. • Kontakt: Navne i tekst hvordan man kommer i forbindelse med korets kontaktpersoner samt indsat kontaktformular • Intern side: side med log-in til brug for kormedlemmerne, med fælles E-mail og evt. SMS advisering.

Der indsættes et RSS-feed, så alle målgrupper kan holdes løbende orienteret, når der sker opdateringer på siden.

IIIb Interaktionsdesign Startsidens interaktionsmuligheder skal være overskuelige, let tilgængelige og interessefangende. Centrale menupunkter er Videoafspilning, der placeres og udformes iøjnefaldende. Navigationsstrukturen bliver traditionelt og velkendt hierarkisk. Forsidens sidemenubjælke følger med på alle undersider. På startsiden fremhæves i sidebjælken menu-punkterne: ”Noget for dig?” og ”Noget for dit barn”, der anbringes til venstre i bjælken.

I venstre kolonne fra midt og ned placeres links til relevante sites (Musikskolen, Domsognet, Andre kor, m.fl.).

I højre kolonne placeres øverst et søgefelt til sitet, under det en tekstrubrik ”Støt os” med oplysning om giro- bankkonto, hvor evt. bidrag kan indsættes, tak for støtte, og kontaktmail.

I undersiden ”Kontakt” placeres en ”kontaktformular”.


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~8~

I undersiden ”Koncertomtale” placeres en indlægswidget med tekstoverskriften: ”Fortæl hvad du syntes om vores koncert”.

I undersiden Intern placeres en log in formular, Email funktion samt en blog funktion til intern kommunikation.

I undersiden Billedarkiv placeres en kategorivalgs funktion, så man kan få et galleri vist efter kalender, efter emne (jule-, påske, sommer og turnekoncerter og rejser [de samme billeder tagges med forskellige kategorimærker]. Sitet som helhed brugeroptimeres til at interaktion kan finde sted fra så mange platforme som muligt: (pc, mac, smartphones, tablets) med en multiplatform plugin og et touch screen plugin.

Processen med udarbejdelse af interaktionsdesign forløb gennem udskrivning af skitser indtil et endeligt FLOWCHART (se bilag 1) kunne udformes.

IIIc Præsentationsdesign I forhold til den primære målgruppe har vi lagt vægt på at anvende medieelementerne: billeder, slide-show og mulighed for valg af video med billede og lyd allerede på startsiden og dermed skabe en indbydende brugergrænseflade til denne målgruppe, og som ligeledes vil fungere godt som udgangspunkt for de sekundære målgrupper, der får en generel fornemmelse af sitets afsender og med et enkelt klik kan navigere videre til deres særlige informationsbehov på sidemenuen og derfra surfe videre på sitet efterhånden som deres interesse bliver vakt.

Som omtalt er logo, slide-show og afspil-video placeret i felter med højt opmærksomhedsniveau, og informationsmenuer for den sekundære brugergruppe i lavere opmærksomhedsområder på forsiden.


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~9~

I Kompositionen af de enkelte elementers placering og baggrundsfarvelægning er vi gået ud fra det perspektiv der er angivet i logo-banneret: et massivt startområde med billedtyngden” til venstre med en billedbevægelse fra venstre, der bliver svagere og fortoner sig ud og op mod højre hjørne – ud mod et åbent perspektiv af muligheder. Denne bevægelse vil vi fastholde i kompositionen ved at bruge de mørkeste farvenuancer for neden og til venstre og lysere til højre og opad. Således at sitet skal udtrykke, at med først ”alvorligt arbejde”, altså øvetimer, som grundlag og udgangspunkt, så bevæger man sig også op mod stadig mere åbne muligheder og oplevelser, og således også på denne måde signalere hvad sitets afsender, drengekoret, står for.

Vi vil undgå stærke kontraster mellem de store flader men vægte harmoniske, komplementære strukturer der giver en baggrund af rolig udvikling. Dog med større kontrast i forhold mellem skriftfarve og baggrund, af hensyn til læsbarhed og for at tilføje et element af ungdommelig sprælskhed.

Som baggrundsfarver har vi derfor valgt en rolig baggrundsfarve lyseblå baggrund #cee3f6 og til sidebarer kaki #eee8aa brune.

Til skrifttype farver er følgelig valgt stærkere nuancer bl.a. rødt #ff0000. Som primær skriftfont til brødtekst anvendes ”Georgia”, eller ”High Tower” og til overskrifter og fremhævede skrifter ”Bookman Old Style”, eller Rockwell, skærmvenlige skrifttyper der samtidig signalerer nærhed og varme. Vi har overvejet skrifter som f.eks. MetDemo font, der både har nodetyper og alfabetskrift, men det vil vi overlade til genovervejelse ved en senere revision af sitet, også fordi mange platforme ikke understøtter specielle fonte. En skematisk oversigt over designelementerne er optegnet på et Storyboard (se bilag 4).


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~ 10 ~

IV Realisering Sitet produceres på grundlag af flowchart og storyboard og noter. Undervejs i produktionen forekom der afvigelser fra det først planlagte, dels af produktionstekniske, dels af andre hensyn.

Clip art blev fundet som free ware på nettet. Billedmaterialet blev hentet fra korets eksisterende hjemmeside. Video klip blev uploadet fra You Tube.

Produktionen blev udført i CMS-systemet Word Press. Word Press er kendt for stor pålidelighed, og er som open source omkostningsfri for kunden, og vi lagde vægt på begge dele. I word-press anvendtes skabelonen Atahualpa, som er et meget fleksibelt layout at arbejde med. Så vi fandt det var et solidt grundlag for kunden at arbejde videre på med mulighed for tilpasning af sitet til fremtidige ønsker.

Af hensyn til den fremtidige brugbarhed installerede vi et SEO plug-in og som validator et link til Unicorn - W3C's forenede kontrolleringsværktøj, til evt. brug ved fremtidige ændringer eller fejlfinding. Vi vil overdrage sitet med en mundtlig instruktion og med flowchart og storyboard og noter som en samlet portefølje, der som sød musik


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

vil sĂŚtte kunden i stand til at vedligeholde og opdatere sitet.

~ 11 ~


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~ 12 ~


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~ 13 ~


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~ 14 ~


ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21

~ 15 ~


~ 16 ~

ProjektrapIngeBirgitRainerPreben[1].docx 10-06-2011 12:21 Planlagt tid Tidsplan for projektet Skt. Clemens Drengekor - Bilag 0 Idéundfangelse Idéudvikling Idéudvælgelse Farver/skrifter Planlægning af tekst- og billedfremstilling Produktion Præsentation for kunden Produktions-/finishlayout Storyboard Brugerfladen slices Produktion i word-press Portefolie Udarbejdelse af rapport I alt timer

Mødeplan: Mandag kl. 09.00 - 14.30 Tirsdag kl. 09.00 - 14.30 Onsdag kl. 09.00 - 14.30 Torsdag kl. 09.00 - 14.30

Arbejdsdeling Preben: home model Rainer: grafiske virkemidler Inge: designmanual - fotolayout Birgit: designmanual - procesdokumentation Multimedieteknologi - Tidsplan for projektet "Skt. Clemens Drengekor"

Faktisk tid 3 2 1 1 10 20 1 2 4 5 10 2 10 71

3 5 2 2 8 30 1 10 2 1 25 5 20 114


Projekt Birgit Inge Preben Rainer