Nyt website Ranum EC

Transkript

1 Nyt website Ranum EC

2 Indholdsfortegnelse Indledning... 4 Baggrund... 4 Problem... 4 Løsning... 4 Problembeskrivelse... 5 Problemformulering... 5 Metode... 6 Teori... 7 SEO... 7 Validering af website... 7 AIDA... 8 Attention... 8 Interest... 8 Desire... 8 Action... 8 SWOT... 9 Interessentanalyse... 9 Målgruppe Prototypetest Spørgeskema Laswells Mindmapping Flowchart Gestaltlovene Foranalyse Kundemøde Produktdefinition Procesdefinition Analyse af gammelt website Interessentanalyse Kravspecifikation Ekstra produkt Undersøgelse Planlægning... 19

3 SWOT-analyse Konkurrentanalyse Logo i midten Tydeligt CTA Nyhedsmodul USP Målgruppe Primær målgruppe Sekundær målgruppe Research/dataindsamling Spørgeskema Svar Ideudvikling Mindmap Navigation Photoshop-udkast Gavick Mo Joomlart Fixel Joomlart Purity III Konceptbeskrivelse Kommunikationsplanlægning Hvem er afsenderen? Hvad er budskabet? Hvem er målgruppen? Hvilket medie skal vi bruge og hvor? Hvilken effekt ønsker vi? Design Logo Det gamle logo Det nye logo Favicon Informationsdesign At udvælge information Brugerens krav Forsiden Informationsbriefing, navigation & strukturering sfsdfsdfsdfsdfsdffddsfsdfsdfsdf2 2

4 Interaktionsdesign Flowchart Præsentationsdesign Tekst Billeder Animation Video Lyd Komposition Opmærksomhedsniveauer Skitselayout Gestaltlove Kontraster Farver Typografi Implementering Joomla Template Ja_Sugite Moduler Brugervenlighedstest Prototypetest Websitetest Ydeevne Søgemaskineoptimering Skærmopløsning og foldline Konklusion Perspektivering Processrefleksion Litteraturliste Bilag Bilag 1. Analyse af gammelt website Bilag 2. Research af konkurrenterne Bilag 3. Spørgeskema Undersøgelse af hjemmesidens påvirkning Bilag 4. Designmanual for Ranum Efterskole sfsdfsdfsdfsdfsdffddsfsdfsdfsdf3 3

5 Indledning Jeg har valgt at lave mit eksamensprojekt hos mit arbejde eftersom hele grundlaget for, at starte på multimedieuddannelsen var, at jeg skulle kunne varetage webmasterrollen på et højere, struktureret og mere professionelt plan. Baggrund Ranum Efterskole er en af Danmarks største almene efterskoler i Danmark. Med vækst fra første år skolen startede til i dag hvor man igen udvider, og denne gang til det der lokalt kendes som Ranum Hus i Ranum. Efter sommerferien vil skolen kunne sige velkommen til over 400 nye elever, som kommer fra hele landet og nu også fra hele verden. Hele Danmark har og er stadig det primære fokuspunkt for hvor nye elever skal rekrutteres fra men det sidste år er der åbnet en international del op som skal hjælpe med at fange elever/learners fra det store udland. Hertil er der lavet en lille kampagnesite, ranumefterskolecollege.com som jeg også har lavet i samarbejde med Joakim Philipsen leder af International Afd. Problem I dag står vi med 2 websites, vores hovedsite og kampagnesitet, som primært foregår på engelsk. Hovedsitet blev lavet for nogle år siden da vi gik fra et lukket cms-system, hvor vi ikke selv kunne styre fra eller til men kun redigere indhold, til open source CMS systemet Joomla. Her blev der foretaget et kæmpe arbejde med at konvertere de gamle sider til nye artikler/sider i Joomlas system, samt lave et nyt tema der nogenlunde lignende det gamle for at få en mere glidende overgang rent visuelt. Efterfølgende er der kommet mere og mere indhold i form af tekst, billeder og videoer i vidt forskellige udtryk og signalet bliver mere indviklet. Dels fordi der er mange som editerer de forskellige undersider og dels fordi vi ikke har nogen egentlig designmanual at følge. Hovedsiden har desuden et forældet udtryk og generelt for meget visuel forstyrrelse på forsiden. Løsning sfsdfsdfsdfsdfsdffddsfsdfsdfsdf4 4

6 En egentlig løsning på ovenstående vil være at lave et nyt site fra bunden eller personliggøre et eksisterende tema med Joomla som fundament. Eftersom der er begrænset tid til opgaven vil en opgradering af selve fundamentet(joomla) og lave nyt tema være at foretrække, da det vil spare tid men vil stadig komme til at føles frisk og nyt. Problembeskrivelse Vores hjemmeside (ranumefterskole.dk) er forældet, rodet og har efterhånden en manglende struktur i hele opbygning. Den følger ingen af de nuværende trends med hjemmesideeffekter, såsom parallax scrolling. Eller trenden med, at udvikle alt flat uden nogen form for realisme (skeuomorphic design). Dét er ikke nødvendigvis en dårlig ting så længe du kommer ud med dit ønskede budskab på hjemmesiden, og det modtages positivt hvortil du opnår din ønskede handling (køb, ring, bestil, tilmeld osv.). Og især det, at vi har flere som editerer på hjemmesidens sider uden nogen form for manual for hvordan det skal se ud eller gøres. Når alt det er sagt er det svært, at benægte siden nogen former for høj brugervenlighed. For jeg har hørt fra flere igennem de sidste par måneder, at siden er svær at bruge, ineffektiv at bruge og langt fra tilfredsstillende at bruge. Det er det modsatte af brugervenlighed og det er også noget af det jeg gerne vil komme med et bud til at løse. Heldigvis har vi midlertidigt vores egen in-house designafdeling, som har fået til opgave, at udarbejde ny designmanual. Den indeholder nyt logo, magasin, brevhoveder, signaturer, visitkort, elementer til mindetrøjer osv. Her skal de nye grafiske elementer såsom logo, farver og koncept gå igen på hjemmesiden. Problemformulering Hvordan skaber jeg en moderne hjemmeside som stemmer overens med en ny design manual og de budskaber (værdier, historie mv.) som skolen ønsker at kommunikere ud til hjemmesidens målgruppe med henblik på at rekruttere, men også samtidigt informere? sfsdfsdfsdfsdfsdffddsfsdfsdfsdf5 5

7 Metode Jeg vil benytte mig af den åbne multimedieudviklingsmetode HOME. Den er helhedsorienteret, som betyder at samtlige aktiviteter bliver anskuet fra 2 forskellige vinkler, som er produkt og proces. Den er samtidig åben, som betyder at du kan tilpasse den til præcis dit udviklingsarbejde, uanset om det er en hjemmeside, mobil app, digital publikation, spil osv. HOME består af følgende fire faser, som jeg også har valgt at opbygge min rapport i: Foranalyse Undersøgelse Design Realisering Aktivitet Kundemøder Informationsindsamling Teametablering Planlægning Ideudvikling Research Kommunikationsplanlægning Koncepttest Team- Building Vurdering Regulering Information Interaktion Præsentation Brugertest Vurdering Regulering Projektafslutnin g Produktion Integration Systemtest Accepttest Dokument Projektbeskrivelse Samarbejdsaftale Projektplan Projektbeskrivelse Konceptbeskrivelse Kommunikationsplan Testdokumentation Revurderede planer Projektbeskrivelse Informations struktur Flowchart Storyboard Revurderede planer Afleveringskont rakt Evalueringsrap port Medieelemente r Golden master (Fischer & Oosterbaan 2010:13) I foranalysen har jeg har været til møder som blandt andet skulle afklare produktdefinition og procesdefinition, med disse 2 dokumenter (som du kan læse nede i foranalysen) har jeg kunnet vælge relevant udviklingsmetode. Den valgte metode er endt på Vandfaldsmetoden eftersom den anbefales til korte projekter, som dette projekt må siges at være. Vandfaldsmetoden kendetegnes desuden ved, at den er faseopdelt hvor én fase afsluttes før du går til den næste. Dette medvirker til, at hele processen bliver mere synlig og struktureret. (Fischer & Oosterbaan 2010:31) sfsdfsdfsdfsdfsdffddsfsdfsdfsdf6 6

8 Teori Igennem rapporten og projektet vil jeg tage udgangspunkt i forskellige teorier. Der er tale om Seo, Brugertest, Validering af website, AIDA, SWOT, Interessentanalyse, Målgruppe, Laswells, Mindmapping, Flowchart og gestaltlovene. Disse vil jeg beskrive her i mit teoriafsnit og i de efterfølgende hovedafsnit vil jeg bruge dem i praksis. SEO Ved korrekt brug af søgeoptimering vil det kunne afgøre, om hjemmesiden og dens indhold, vil være nemt at finde og i sidste ende få success. Med søgeoptimering menes der, at indholdet på hjemmesiden skal optimeres til de regler der er gældende ved de forskellige søgemaskiner. Her er det især ved brug af streng overskrift kultur, dvs. at der skal holdes en stram regel om brugen af forskellige h1,h2,h3 osv og at de er nemme at læse. Der bliver også kigget på din brug af keywords og om de optræder flere steder og om de misbruges på hele hjemmesiden. Det er ligeledes vigtigt, at overholde forskellige webstandarder såsom W3s, som kan være med til, at give en bedre brugeroplevelse. Have god hastighed på hjemmesiden og ingen af døde links. Det er med til, at forhøje din placering og synligheden på eks. google.com. Noget af det nye fra Googles Søgemaskine algoritmer er også hyppigheden af nyt indhold samt deres eget sociale medie Google Plus. ( Validering af website Ved en website-validator kan der tjekkes for fejl og eventuelle fejloptimeringer, som kan medvirke til en dårlig oplevelse for modtageren. Jo mindre fejl desto bedre oplevelse burde der i teorien kunne opnås og samtidig sikre sig et bredt samspil på tværs af browserne. Der bliver eksempelvis testet for om hjemmesiden har mange store filer, som betyder en langsommere oplevelse af hjemmesiden. ( sfsdfsdfsdfsdfsdffddsfsdfsdfsdf7 7

9 AIDA Jeg vil bruge AIDA-modellen, som en tjekliste til at hjælpe mig med, at sætte ind på de rigtige punkter på hjemmesiden. Så målgruppen får den mest optimale oplevelse. AIDA står for Attention, Interest, Desire og Action. AIDA kaldes også for en kommunikationsmodel, som er en skabelon til at skabe interesse for eks. din hjemmeside. Attention Fængende overskrift, som skal fange modtagerens (eleven) opmærksomhed. Det kunne være en overskrift i starten på hjemmesiden, som siger: Ranum Efterskole College er for dig, der har lyst til nye faglige og personlige udfordringer og vil udforske verden. Det kan også være en kombi med et fullscreen billede. Interest Nu har vi fanget modtagerens opmærksomhed og nu skal vi skabe en interesse for vores tilbud af et efterskoleår. Det kunne være Du får 400 nye venner, 3 rejser til hele verden og en personlig dannelse sat på turbo. Desire Nu har vi fået modtagerens opmærksomhed, skabt interesse og vist, at vi kan indfrie modtagerens behov. Og derfor har modtageren nu et ønsket behov om at være i samme sted som på eks. billederne der bliver vist ved attention. Et behov er opstået for det som bliver vist på hjemmesiden og nu skal der tilbydes en handling, så behovet kan blive indfriet. Action Modtageren er klar til at bestille eller foretage en form for handling, så det ønskede behov kan indfries. Her kommer der et CTA ind. Det kunne være en Meld dig ind el. Bestil rundvisning eller ring op og snak yderligere om mulighederne. (startvaekst.dk) sfsdfsdfsdfsdfsdffddsfsdfsdfsdf8 8

10 SWOT Med SWOT kan jeg få et overblik over Ranum Efterskoles styrker + svagheder og konkurrencesituationen ud fra fokus på de fire kategorier, som vises nedenfor her. Det er en model til at sætte struktur på de forskellige situationer skolen står i. Med den i hånden kan jeg danne mig et yderligere billede af hvordan skolen står og hvilke områder der skal satses på. ekstern\internt Styrker Svagheder Muligheder Trusler Kilde: Interessentanalyse Formålet med en interessentanalyse er, at dem som arbejder med projektet får kortlagt alle de personer (i organisationen eller uden for) som har en interesse i projektet. Interessentanalysen vil især være vigtig ved større projekter hvor der er mange personer inde over, og som helt givet vil have noget at skulle have sagt. Her kan vi så lave analysen og ud fra forskellige spørgsmål finde frem til hvem som er vigtige at have med på nært hold og som skal have indflydelse på projektet. Nogle af spørgsmålene vi kan stille os ved analysen kunne være: Hvilke personer bliver berørt af forløbet i projektet? Hvem bliver berørt af projektets resultat? For mit projekt vil jeg lave en interessentanalyse fordi vi netop har så mange personer, som har en interesse i det videre forløb og i resultatet. Og her er det vigtigt for mig at få kortlagt alle, som kunne have en ide, interesse eller anden måde være involveret i projektet. Der vil jeg blandt andet lave en brainstorm over alle interessenter og herefter samle dem i et diagram. (Fischer & Oosterbaan 2010:55) sfsdfsdfsdfsdfsdffddsfsdfsdfsdf9 9

11 Målgruppe Jeg vil kort redegøre for hvilken målgruppe vi har længere nede i undersøgelsesafsnittet. Her kommer jeg ind på kategorisering af målgruppen, såsom køn, alder, bopæl samt uddannelse. Jeg vil ligeledes også komme ind på hvem der er vores primære og sekundære målgruppe. Jeg vil opstille nogle spørgsmål som jeg skal bruge til dataindsamlingsmetoden: Spørgeskemaundersøgelser. Herefter vil der være en kort analyse af de modtagne svar, som skal bruges til at lave et resultat om hvad der skal være på hjemmesiden m.m. (Fischer & Oosterbaan 2010:122) Prototypetest En prototype test kan være med til at afsløre om man har lavet sit digitale medie korrekt og om det virker ud fra det formål man har stillet. En brugertest både før, midt i og efter er med til at sikre sig, at vi er der hvor målgruppen gerne vil være. Og sikre os at de budskaber vi gerne vil ud med forstås og modtages som forventet. Det hjælper også med til at teste funktionaliteten. (Fischer & Oosterbaan 2010:75) Spørgeskema Brugen af spørgeskema placerer sig ofte inden for de kvantitative metoder. Det som kendetegner kvantitative spørgeteknikker er bl.a. et Spørgeskema, Lukkede spørgsmål, de giver overblik og er struktureret. Fordelen ved, at jeg laver et spørgeskema er, at jeg kan få mange tilbagemeldinger, som kan være med til at underbygge svarenes troværdighed mod hvis jeg lavede et interview med 1 person. (Fischer & Oosterbaan 2010:109) sfsdfsdfsdfsdfsdffddsfsdfsdfsdf10 10

12 Laswells Jeg vil desuden benytte mig af Harold D. Lasswells kommunikationsmodel/kanyleteorien til at analysere kommunikationssituationen yderligere. Dog læste jeg mig frem til, (Viktor Rasmussen & Harder Fischer 2008:25) at den grundlæggende tanke ved modellen er, at den sprøjtes direkte ind i modtageren, som derefter vil ændre sin adfærd og holdninger. Kanyleteorien opfatter således modtageren som passiv og forførbar og derfor anskues kommunikationen som primært en overtalelsesproces. Og set ud fra vores unge målgruppe, som tager nye tendenser, kulturer samt holdninger til sig som vinden går, kan det være den ikke er vildt relevant eftersom jeg ikke ser vores modtager, som passive og lette at ændre adfærden hos. Ranum Efterskole College konkurrerer trods alt om målgruppen blandt mere end 250 efterskoler i Danmark. Men jeg vil afprøve den trods alt. Den består helt konkret af 5 HV-spørgsmål: Hvem siger hvad, i hvilket medie, til hvem med hvilken effekt? Dvs. Hvem er afsenderen? Hvad er budskabet? Hvem er målgruppen? Hvilket medie skal vi bruge? Hvilken effekt ønsker vi? (Fischer & Oosterbaan 2010:24) Mindmapping Mindmapping er en måde at få et visuelt overblik over beslægtede ideer og tanker. Et mindmap bliver for alvor godt når teamets ideer og tanker får lov til at flyve rundt uden at der tages vurderinger, kritik eller negativ feedback af forslaget. For mig er mindmaps ofte anvendt ved ideudvikling af sitemaps eller hvilke features en hjemmeside skal benytte. Et mindmap fungerer som en illustrativ brainstorming og kan udføres på papir eller via et program på computeren/online. I mit tilfælde bruger jeg programmet MindView fra Matchware. Et mindmap består typisk af følgende elementer: Emnet, overordnet ide eller problemet, som oftest placeres i midten. Ideer/tanker i form af nøgleord skrives rundt om emnet i eks. Bobler. Ideerne/tankerne forbindes med emnet via hovedgrene og undergrene. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf11 11

13 Farver, til at understøtte/understrege en ide/tanke. (Fischer & Oosterbaan 2010:93) Flowchart Et flowchart er en let grafisk oversigt med kasser, nogle gange medieelementer som signalerer forskellige forløb og processor i den produktion men designer. Det er en måde hvorpå udvikleren kan vise overfor eks kunden eller sit udviklerhold, hvordan informationen er organiseret og hvilke veje brugeren skal igennem for, at nå til det fastsatte mål. (Fischer & Oosterbaan 2010:156) Gestaltlovene Gestaltlovene er nogle retningslinier eller regler for kompositionen af de forskellige medieelementer. De 3 gestaltlove er: Loven om nærhed De elementer, som ligger tæt op af hinanden opfattes som sammenhørende. Loven om lukkethed De elementer, som eks er placeret i en lukket kasse opfattes som at være sammenhørende. Loven om lighed De elementer, som minder om hinanden eller kan grupperes sammen opfattes ofte i en eller anden grad som lig hinanden. Det kan eks være to menuer som ser anderledes ud men har samme indhold og fungerer synkront med den anden menu. (Fischer & Oosterbaan 2010:169) sfsdfsdfsdfsdfsdffddsfsdfsdfsdf12 12

14 Foranalyse Kundemøde D. 5. maj 2014 havde jeg mit første egentlige kundemøde eftersom det var blevet udskudt pga. tidspres. Der har været adskillige små møder, som egentlig kun har givet anledning til flere spørgsmål end svar. Deltagerne var mig selv og ansvarlig for den internationale afdeling, Joakim Philipsen. Joakim, jeg selv, samt vores designansvarlige, Nigel Hopwood, har ansvaret for den nye hjemmeside, men hvor jeg står for opbygning af en prototype. En prototype som vi højst sandsynligt skal arbejde videre med efter endt eksamen. Derfor var det vigtigt, at have første kundemøde med Joakim. Jeg lavede en helt ordinær start med hvad han gerne vil have og hvilket primært formål siden skulle have. Her kom han med 5 hurtige punkter, som hjemmesiden/forsiden skal byde på: 40 af de bedste billeder Nyhedsmodul for kommende elever CTA - Meld dig ind / enroll USP vist frem. Formål - Rekruttering af nye elever. Så siden skal hjælpe med en nem online registrering når vores salgsteam er ude og rekruttere eller interviewer nye potentielle elever. Efter en kort snak om ovenstående gik jeg videre ud fra min bog (Digital Media Management, 2010, s ). Med produktdefinition og procesdefinition. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf13 13

15 Produktdefinition I omtalte møde fik jeg lavet følgende spørgeskema samt output: Hvem er målgruppen? Køn Alder Nationalitet Bopæl Mixed år Dansk + International Alle Brugssituation Hjemme/fritid, offentlig eller på arbejde? Alene eller i grupper? Suppleret af andet materiale? Det skal kunne bruges de steder, hvor den unge eller sine forældre oftest vil besøge hjemmesider. Dvs. hjemme og i fritiden. Siden skal både kunne bruges alene til at skabe motivation til indmelding men også i grupper når vedkommende skal melde sig ind i samarbejde med forældrene. Brochure og folder. Formål Hvad er kundens formål med produktet? Hvad vil være brugernes incitament til at bruge produktet? Salg / rekruttering af elever. Læring, dannelse og udvikling Hvem er kunden? Hvad er kundens image Har kunden andre produkter - hvordan er de? Hvordan ønsker kunden at blive præsenteret? Kvalitet. Nej, et produkt. Simpelt og enkelt. Soft og hardware Er der krav om særlige medieelementer på siden? Ja, den nye designmanual skal overholdes til punkt og prikke. Distributionsmedie Hvilke krav har kunden til funktionalitet? Nyhedsmodul, Slideshow, USP, Digital magasin som præsenterer ansatte med henblik på bedre connection til nye studerende og salg. Responsive. Vedligeholdelse og opdatering Skal produktionen følges op af vedligeholdelsesopgaver eller andre opgaver? Skal kunden selv kunne vedligeholde produktet? Vedligeholdelse ja. Ja. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf14 14

16 Procesdefinition Med procesdefinitionen i hånden har jeg mulighed for at vælge den rette udviklingsmetode. Er behovet for procesdokumentation stort/lille? Styrer du/i normalt projekter ved brug af dokumenter/sign-offs?? Er dokumentation vigtig for beslutningsprocessen i virksomheden? ja/nej Kundens vidensniveau inden for genren/medieområdet? Har kunden tidligere udviklet digitale medier? Er kunden bekendt med andre udgivelser på markedet? ja ja Hvordan vil du/i betegne jeres viden om mediet? (sæt kryds) Ekspert/alvidende inden for området? Almen/allround interesse? x x Kender til enkelte titler/nybegynder? Muligheden for specificering af krav Kan du/i på dette tidspunkt definere præcist, hvad det er du/i vil udvikle, eller er det nødvendigt med lidt research på området? Et website som skal rekruttere nye elever. Kan du/i beskrive: Teknik, indhold og design?? Holdning til projekt/udviklingsarbejdet? Er det vigtigt for dig/jer, at projektet er synligt på alle niveauer Ja Tror du/i på, at et løst planlagt projekt giver bedre muligheder for at finde på kreative innovative indslag og dermed skabe et bedre og sjovere produkt i sidst ende? Tid og omkostninger Hvordan ser tidsplanerne ud? Er budgettet realistisk? Kort tidsplan Det koster det det koster - value for money sfsdfsdfsdfsdfsdffddsfsdfsdfsdf15 15

17 Analyse af gammelt website Jeg har gennemgået den gamle hjemmeside inden vi foretog et opgraderingsindgreb i den gamle hjemmeside. Her har jeg opdelt hvert enkelt element og kommer med kommentarer dertil. Eftersom det er et full website screenshot er den en smule lang, og må derfor henvise til bilag 1. Se bilag 1. for større billede. Hjemmesiden er baseret på en relativt forældet version (2.5) af Joomla med nogle meget brugte extensions, såsom RSjoomla, akeeba backup, nyhedsbrevsplugin, gallerier og slideshow. RSjoomla er en extension som styrer formularer og akeeba backup er til at tage fulde backups af siden. Disse 2 extensions skal med over i den nye. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf16 16

18 Interessentanalyse Med denne interessentanalyse har jeg foretaget en kort brainstorming hvor jeg har tænkt på alle der kunne have en interesse i projektet, ny hjemmeside. Jeg har herefter sorteret interessenterne i et pointsystem, ud fra hvem der er vigtigst til mindst. 5 står for vigtigst hvor 1 står for mindst. 5 Nigel Hopwood, designer - Ranum Efterskole Joakim Philipsen, Int. afd. - Ranum Efterskole Olav Storm, Forstander - Ranum Efterskole 4 IT-Support - Ranum Efterskole 3 Elever, nuværende + kommende Lærer 2 Samarbejdspartnere 1 Efterskole.dk sfsdfsdfsdfsdfsdffddsfsdfsdfsdf17 17

19 Kravspecifikation Ud fra de indledende møder og på forhånd definerede krav (Nyt website i nyeste joomla som overholder designmanualens farver, koncept og billedregler), så lyder en godkendt kravspecifikation sådan her: Krav til nyt website Formål At rekruttere nye elever Klar angivelse af CTA (Tilmeld). 40 af de bedste billeder på hjemmesiden. Ikke mere. Nyhedsmodul USP s Vise skolens unikke tilbud. Bruge farver som i den nye designmanual. Brug af ifttt.com så vi automatisk kan lette nyhedsopgaven på de forskellige sociale medier. Intet billedgalleri, men brug allerede eksisterende platforme som flickr med højtopløste billeder og facebook. Intet videogalleri, henvis i stedet til youtube. Tidsramme Delmål som hedder d. 28. maj og herefter finpudsning frem til eksamen. Tekstindhold m.m. skal i grove træk genbruges fra den gamle side. Noget skal nytænkes. Ekstra produkt. Digital publikation lavet i InDesign som portrættere de ansatte med video samt billeder. Det skal foregå ud fra det runde koncept i den nye designmanual. Der skal ligeledes laves en video som går igennem prototypen. Denne video skal kunne ses af censor og må ses som ekstra bilag. Obs! Dette produkt (videre)udvikles efter aflevering af rapport samt hjemmeside og vil blive vist, som noget nyt til eksamen. Video demo vil kunne hentes her sfsdfsdfsdfsdfsdffddsfsdfsdfsdf18 18

20 Undersøgelse I undersøgelsestrinnet vil jeg komme ind på planlægning af projektets videre forløb, jeg vil brugerteste ud fra den gamle hjemmeside og høre de kommende elever, om hjemmesiden har været en medvirkende årsag til at de valgte netop Ranum, som deres efterskole. Jeg vil desuden lave en research af konkurrenterne ud fra det allerede indsamlet materiale (Se bilag 2.) Der vil også være en analyse af navigationen set ud fra Google Analytics, hvortil jeg ser de mest populære menupunkter og tager dem med i en overvejelse af ny, simpel og skarp navigation. Planlægning Jeg har lavet et forsimplet ganttdiagram her til rapporten. Den består af de 4 milepæle fra HOME samt rapport-relationer. Den indeholder desuden ikke et diagram over budget eftersom jeg er fuldtidsansat hos Ranum Efterskole College. Der vil dog være frie rammer til nødvendige ressourcer. Såsom typefaces, tutorials(lynda), tilbehør til PC(mus, skærm, mac osv.) sfsdfsdfsdfsdfsdffddsfsdfsdfsdf19 19

21 SWOT-analyse I min swotanalyse vil jeg se på de eksterne muligheder samt interne styrker og svagheder for Ranum Efterskole College. ekstern\internt Styrker Lokalsamfundet Naturen Engagerede ansatte Kan lave det meste selv Kontinuerlig vækst Moderne faciliteter Svagheder Størrelse (+400 elever) Busforbindelser Konstant vækst fra år til år Begrænset muligheder sammenlignet med skoler tæt på eller i storbyer. Travl administration Muligheder Nye profilfag Nye rejser Ny international linje Miljøinteresse Samfundsinteresse Ambassadør for DK Kommunikere miljøbevidsthed Benytte forskellige badges, som står for miljø, samfund og andre interesser. Signalere mere nærhed og plads til mindre fællesskaber Online Chatfunktion. Trusler Konstant og dynamisk konkurrence fra andre efterskoler Sikkerhed på rejser Økonomiske kriser Fortsætte med at være innovative og forgangsskole indenfor profilfag samt rejser Mere klar angivelse af sikkerhedsinstruks til rejser. Vejlede med transport fra og til på hjemmeside. Underholdningsguid e i lokalområdet? Kilde: Ved funktionen Online Chat kunne det indrettes sådan, at en evt. flexjobber eller anden administrativ arbejde som ikke sad med primære og tunge ting, skulle holde chatten igang. Og kunne svare på simple spørgsmål fra de onlinebesøgende. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf20 20

22 Konkurrentanalyse Udsnit af konkurrenterne fra research. Se hele pakken i bilag 2. I min praktikperiode lavede jeg en research af samtlige efterskolers hjemmeside i Danmark. Det blev til over 250 screenshots(full HD) af deres forsider. Med denne researchmappe i hånden har jeg kunnet danne mig et overblik over samtlige efterskolers digitale udtryk på nettet. Hvad vi skulle undgå, hvad der var for meget af i grafiske elementer og budskaber samt farver. Og især hvilket udtryk vi skulle satse på. I min første gennemgang fandt jeg ud af, hvor nemt det var at se et bestemt webbureaus særlige træk. Noget som desværre gik igen ved adskillige efterskoler. Når nogle grafiske træk og layouts går igen smuldre den smule unikhed der er ved hjemmesider gevaldigt. Og her vil det blive endnu sværere, at distancere sig fra konkurrenterne. Herunder har jeg analyseret samtlige sider for aktuelle punkter som kunne være relevante for vores egen hjemmeside og de lyder: Logo i midten. Ud fra vores nye designmanual er der beskrevet et koncept med ting i midten (elever, faciliteter, venskaber, oplevelser osv.) og logoet skal altid stå i midten. Hvilke konkurrerende efterskoler har deres logo i midten i toppen? sfsdfsdfsdfsdfsdffddsfsdfsdfsdf21 21

23 Tydeligt CTA Vi skal selv have tydeligt CTA (Call-to-action) med en meld dig ind, bestil rundvisning og/eller en ring os op nu. Og det skal vi fordi, at formålet med hjemmesiden er rekruttering. Uden handling, ingen rekruttering. Hvilke andre konkurrerende efterskoler benytter et tydeligt CTA? Med tydeligt mener jeg et punkt som adskiller sig fra de andre(gestaltloven) elementer på hjemmesiden og samtidig er over foldline på en HD opløsning (1366x768). Nyhedsmodul Der skal være et nyhedsmodul på hjemmesiden som fortæller alle de historier og oplevelser skolen kommer igennem på et skoleår. USP På hjemmesiden skal der listes det som gør vores skole unik eller på anden måde distancere sig fra de konkurrerende efterskoler. Hvilke andre skoler gør dette? Logo i midten Baunehøj Efterskole Skamling Efterskole Faaborgegnen Hårslev Efterskole Midtfyns Efterskole Risskov Efterskole Ryslinge Efterskole Svenstrup Efterskole Vestsjællands Idræts Efterskole Østerskov Efterskole Aalestrup Efterskole Eisbjerghus Efterskole (opdateret) Tydeligt CTA BGI (Begynd på BGI) Balle(Kom og besøg os) Adventure Efts (Bliv elev) Den rytmiske (Tilmelding her) Djursland (Bliv elev) Alterna Efterskole (Tilmeld dig) For Scenekunst (Bliv optaget allerede nu) Frydensberg (Tilmelding) Kildevæld (Tilmelding) Elbæk (1 2 3 tilmeld) Fenskær (Bestil brochure) Finderup (Ny elev) Flemming (Ny elev?) Glamsbjerg (Book et besøg) Hammerum (Ring, Mail skriv) Hardsyssel (Besøg os) Himmelbjerg (Bliv elev) Hobro (Vil du med på holdet?) Holte Hus (Bestil Brochure) Hou HMI (Nysgerrig?) Høng (Tilmeld dig her) sfsdfsdfsdfsdfsdffddsfsdfsdfsdf22 22

24 Mejlby (Ansøg i dag) Midtsjællands (Besøg os) Ringe (Ny Elev?) Rønde (Bliv elev) Salling (Tilmelding) Samsø (Tilmelding) Skrødstrup (Kom og besøg os) Thyland (Ansøg i dag) Vrigsted (Bliv elev) Øse (Tilmeld dig et skoleår på øse) Nyhedsmodul Alle efterskoler havde stort set en form for nyhedsstrøm eller fokus på noget nyt. Nyhederne lå som et resume centralt på hjemmesiderne. Online Chat Der er ved første og anden gennemgang af researchmaterialet ikke fundet nogen efterskoler med en onlinechat-funktion, som kan fungere som en hjælpende hånd til kontoret. USP Unique Selling Point En del af efterskolerne profilerede sig ud fra et bestemt fag eller linje, eller værdi. Adskillige havde unikke statements som fortalte hvorfor du lige præcis skulle vælge dem, frem for andre. Der var dog rigtig mange som listede alle deres fag/linjer op uden og skrive om netop deres USP. Samtidig havde flere af netop disse sider intet tydeligt CTA eller en moderne brugerflade. Målgruppe Primær målgruppe Ranum Efterskole College har en målgruppe, som primært hedder danske elever i alderen år uanset bopæl i Danmark. Dog er der oprettet en ny international linje, som har fokus på udenlandske elever fra hele verden. Eftersom formålet med hjemmesiden skal være rekruttering af nye elever, vil hjemmesiden primært henvende sig til dem. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf23 23

25 Sekundær målgruppe Selvfølgelig skal der også være et afsnit til forældre samt lovpligtigt stof på hjemmesiden. Forældrene må her kendes som den sekundære målgruppe. Det er trods alt denne gruppe som ofte står for den endelige accept og selvfølgelig med pengepungen. Vigtigheden af at have afklaret hvilke grupper mennesker man vil ramme med sit budskab er vigtigt, så man kan justere sine grafiske virkemidler der efter. Jeg vil dog afgrænse mig til kun at fokusere på den primære målgruppe, som er kommende elever. Research/dataindsamling Spørgeskema Jeg vil gerne involvere målgruppen til at svare på nogle spørgsmål med henblik på da de selv søgte efter efterskoler og hvilke parametre de faldt for og fandt interessante hos Ranum Efterskole. Her har skolen heldigvis facebookgrupper til hvert enkelt skoleår. Jeg vil benytte mig af gruppen med elever for skoleåret Jeg vil bruge en blanding af åbne og lukkede spørgsmål som har potentiale til, at nå ud til mere end 500 personer og kan derfor karakteriseres, som en kvantitativ spørgeteknik. Der vil ikke blive brugt nær så meget tid på at udforme spørgeskemaet modsat hvis jeg ville lave et interview. Et interview ville tage længere tid og jeg vil modtage færre svar. Dels vil der også være et større analysearbejde efterfølgende. Derfor er der valgt et spørgeskema. Det er hurtigere at sætte sammen, og jeg kan få en større mængde svar, deraf kvantitativ. Jeg kunne også vælge en anden mere direkte spørgeteknik hvor jeg blot skal forholde mig til antal svar og ikke analysere åbne spørgsmål. Men eftersom det her er vigtigt for projektet, at få uddybet elevernes tanker fra dengang de kiggede på efterskoler er valget derfor truffet til denne form. Med dette spørgeskema vil jeg forhåbentlig kunne få nogle svar ud, som kan bruges til yderligere at definere hvad der skal være med på hjemmesiden og hvad jeg ikke behøver vægte så højt. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf24 24

26 Jeg har lavet et kort mindmap over mulige spørgsmål til et spørgeskema. Herefter vil jeg se på de forskellige ideer og udvælge og herefter spørge Joakim Philipsen til råds om punkterne. Endelige spørgsmål Køn By Hvorfor valgte du Ranum Efterskole? Var hjemmesiden en medvirkende faktor til valget? Hvis ja, hvilke elementer eller parametre på hjemmesiden var med til at overtale dig til, at blive elev på Ranum Efterskole? Hvis nej, hvad vil i dag kunne være medvirkende til, at du tilmeldte dig som elev over hjemmesiden? Hvilken indflydelse havde de sociale medier på dit valg af Ranum Efterskole? Hvilken kontaktform vil du som ung foretrække når du skal kontakte skolen? Hvis du skulle positivt beskrive dit ophold på Ranum Efterskole i én sætning - hvordan ville den så lyde? Link til spørgeskema. Svar Jeg har analyseret svarene igennem Google Regneark og talt de svar op som var ens eller mente stort set det samme og lagt sammen. Svar fra spørgeskemaet kan opsummeres således 11 drenge 30 piger 23 valgte skolen pga. de mange rejser 12 valgte skolen pga. profilfagene Mange valgte desuden skolen fordi de følte der var mange muligheder. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf25 25

27 Hjemmesiden var en medvirkende årsag til valget af Ranum for 59 % (24) af de spurgte. Ud af de 24 svarede 9, at video og billederne var med til at overtale dem. Hjemmesiden var ikke en medvirkende årsag for valget af Ranum for 41 % (17) af de spurgte. Ud af de 17, svarede 4 at de gerne så hjemmesiden mere overskuelig og let tilgængelig. Ud af de 41 besvarelser var der 21, som skrev at de sociale medier ingen eller næsten ingen indflydelse havde. Dvs. næsten halvdelen af de adspurgte så ikke de sociale medier som en indflydelse på deres valg af skole. Ud af de 41 var der 9, som skrev at de sociale medier havde en stor indflydelse på deres valg af Ranum (Facebook). Flere skrev, at avisen havde indflydelse på deres valg. Foretrukken kontaktform hvis de adspurgte skulle i kontakt med skolen. Her svarede 15 , 12 telefon og 12 til SMS. 6 svarede de sociale medier. Til sidst fik jeg rigtig mange gode udtalelser fra eleverne om deres år på Ranum. Disse kan ses i den fulde udgave af spørgeskemaets svar i Bilag 3. Eftersom de virker så gode kan jeg se dem vigtige i en evt. testimonials sektion på hjemmesiden. Ud fra ovenstående svar kan jeg konkludere, at der skal være: Fokus på rejser. Fokus på profilfag Fokus på billedgalleri Let og overskuelig. Kontakt via Telefon & . Testimonials. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf26 26

28 Ideudvikling Her i ideudvikling vil jeg benytte mindmap, navigation og 3 photoshop udkast til at kickstarte min ideudvikling. Og der vil ikke blive skrevet om farver og koncepter, for disse er allerede udviklet på forhånd i vores designmanual. Mindmap Navigation Jeg har desuden valgt at analysere vores statistikker fra Google Analytics, som et yderligere grundlag for hvilke punkter der skal være i navigationen. Her i dette tilfælde har jeg kigget på tallene for Google Analytics i perioden 1 jan til i dag (dvs. godt og vel 5 måneder). Grunden til, at jeg har valgt denne periode er, at den ligger midt i skoleåret og er derfor ikke berørt af skolestart eller afslutning på året, som ville kunne give et andet billede af toppunkter. Det har givet mig følgende tal for navigationen: sfsdfsdfsdfsdfsdffddsfsdfsdfsdf27 27

29 Forsiden er naturligvis den med fleste hits i og med, at det er den første side den besøgende kommer til. Efterskolen er den første reelle side på listen og det er den, som fortæller om hvilken skole samt hvilke værdier den står for. Den tredje er heldigvis Ny elev, som indeholder valg til hvilket år man vil søge ind på. At punktet står så langt oppe viser samtidig, at hjemmesiden allerede bliver brugt til det nye primære formål, nemlig at rekruttere elever. Hernæst er det Undervisning, som får flest hits. Og det er denne sektion, som står for skema, kalender og oversigt over forskellige undervisningsforløb. Denne del kan med fordel indeholde alle de boglige fag som tilbydes af skolen. Så den besøgende kan få et komplet overblik over alle de fag skolen tilbyder. Næste punkt er Nyheder, som er forstanderens sektion. Det er her skolen lægger sine nyhedsbreve ud, som opsummere de ugentlige aktiviteter. Det er også her skolen normalvis skriver om nyt, daglige aktiviteter osv. Profilfag er det 6. mest besøgte punkt og er den del, som fortæller hvilke banebrydende og sjove profilfag skolen tilbyder. Her opererer skolen med 2 hovedgrene, en Imagination og en Natursport. Hver gren indeholder dels kreative fag dels udendørs og mere ekstreme fag, såsom Dyk og pløk, Adventure osv. Til sidst slutter statistikken heldigvis af med det sidste vi mangler, en action en kontakt til skolen. Og det er her kontaktformularen kommer ind på en 7. plads. Med de her top punkter i baghovedet er det muligt, at lave en stram og meget relevant navigation, som passer til det de besøgende helst vil have. Heldigvis kan stort set alle resterende punkter føjes til en af de 7 top punkter. Derfor vil jeg tage de her 7 punkter: Forside(Logo), Efterskolen, Nyheder, Ny Elev, Undervisning, Profilfag og kontakt. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf28 28

30 3 Photoshop-udkast Jeg lavede 3 hurtige udkast i 3 forskellige temaer til joomla. Temaet Mo fra Gavick og FIxel samt Purity fra Joomlart. Der er blevet brugt designmanualens farver samt logo. De er med for at skabe et hurtigt overblik over hvordan de nye farver+logo vil se ud i 3 moderne temaer. Gavick Mo Mo er et tema med fokus på features fra et givent emne. Hvor der er ét kæmpe billede i toppen med tydelige budskaber og fremvisning af værdier. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf29 29

31 Joomlart Fixel Fixel er et radikalt anderledes tema end de 2 andre eftersom det har fokus på nyheder i små, medium og store tiles. Lidt ala det nye interface i Windows 8. Dette tema har den fordel, at der bliver sat fokus på hverdagslivet og de forskellige aktiviteter skolen har. Rejser osv. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf30 30

32 Joomlart Purity III Purity er et gratis moderne responsive tema fra joomlart. Det har mange forskellige layouts som standard men hvor flere af dem tilbyder features på features. Altså hvor den besøgende bliver motiveret igennem en AIDA-agtig gennemgang på hjemmesiden. Der er attention med stort statement eller billede i toppen. Der er fordele/features vist hernæst som vækker interessen for at scrolle yderligere ned. Her bliver den besøgende fodret med fordel på fordel, hvorfor man skal vælge netop denne skole. Til sidst er der tydeligt action (Tilmeld/Meld dig ind) i bunden men samtidig også i toppen. Dette udkast eller tema vil være ét af de temaer jeg arbejder videre med. Ja_Sugite er det andet. Men de minder enormt meget om hinanden så vil ikke beskrive det andet tema her. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf31 31

33 Konceptbeskrivelse Titel Ranum Efterskoles nye rekrutteringswebsite Ide At lave et relevant rekrutteringswebsite, som kan supplere interviews, åbent hus og telefonsamtaler med potentielle kommende elever. Der skal være mulighed for at vise samtlige profilfag, rejsemål og generelle boglige fag. Og også vise skole, dens værdier og faciliteter. Brug Sitet skal bruges af interesserede unge, som er i gang med at lede efter en spændende efterskole. Det kan bruges både hjemme men også på vej til eks et åbent hus på skolen. Indhold En motiverende(vha. rejsebilleder, fællesskaber og profilfag) forside med USP. Billederne skal vises via et slideshow i toppen. Konceptet med at placere cirkler i midten, som både sætter den enkelte i fokus og bagefter fader ud og viser fællesskab. Der skal desuden være en digital publikation, som kan hentes ned på en IPad, som viser skolens ansatte på en frisk og sjov måde. Kontaktmåderne er telefon og . Ingen onlinechat. Udformning Stilen skal svare overens med vores nye design manual. Dvs. farver, logo og cirkler. Samtidig skal der altid vises positivitet, spontanitet og skandinaviske udtryk på billederne. Så vidt muligt. Behov Den rekrutteringsorienterede hjemmeside skal være med til at hjælpe skolen på en mere effektiv måde uden for meget støj, som ikke er relevant for en ny, kommende/potentiel elev. Opmærksomhedsområde Der skal være de lovmæssige punkter, som er defineret på efterskoleforeningens hjemmeside. Der skal desuden være en Læs-op funktion på hjemmesiden. Kommunikationsplanlægning Uden at have tænkt og fremlagt punkter til hvad vi gerne vil sige til hvem, hvordan, i hvilket medie og hvorfor har man ikke et velovervejet fundament til hvordan man vil skabe kontakt til sin målgruppe. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf32 32

34 Hvem er afsenderen? Ranum Efterskole står som afsender af hjemmesiden men i nogle tilfælde står eks også efterskole.dk som afsender og formidler af alle efterskoler, i en kort og relevant form. Men på vores eget website er det os, som står som afsender. Hvad er budskabet? Jeg vil gerne have, at målgruppen oplever og modtager budskabet om en skole der rejser mere end andre, har medindflydelse på sit skoleår, og ser skolen som et sted hvor mulighederne er mange og derved noget til mange smage. At der tænkes kreativt og lidt ud a boksen. Moderne og trendsættende. Skandinavisk. Hvem er målgruppen? Målgruppen er unge mellem år, som vil have oplevelser for livet. Som måske trænger til at komme hjemme fra og finde sig selv. Målgruppens bopæl er ikke begrænset til noget bestemt eftersom de skal bo på skolen ét helt skoleår. Målgruppen er ikke de svageste unge i Danmark men nogen, som tør tage springet. Der er også hele den internationale linje, men som jeg ikke vil fokusere på denne gang, eftersom der herved skal laves en engelsk kopi af hovedsitet. Dette vil der dog blive udviklet senere. Hvilket medie skal vi bruge og hvor? Et internetmedie, en hjemmeside skal bruges til at skyde budskabet afsted. Hjemmesiden vil samtidig kunne ses på en bred vifte af devices, såsom tablets og telefoner. Hjemmesiden og dets elementer vil være responsive. Dette medie er valgt fordi det er let tilgængeligt af hele målgruppen, den er nem at vedligeholde og tilføje nyt og koster minimalt i drift(webhotel) i forhold til eks avis eller blad. Hjemmesiden vil være hensigtsmæssig at bruge både på farten, derhjemme eller til et interview på skolen. Hvilken effekt ønsker vi? Det hele skal ende ud i, at målgruppen får trykket på tilmeld og tilmelder sig et af skolens kommende skoleår. Hjemmesiden handler primært om, at få rekrutteret flere elever. Derfor skal der ikke være forstyrrende elementer i den fase. Det skal være rent, lækkert og effektivt. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf33 33

35 Design Her i Designtrinnets produktniveau vil jeg udfærdige mit projekts indhold, struktur og form. Det sker ud fra min konceptbeskrivelse, kommunikationsplan og mine andre data fra forrige fase. Jeg vil naturligvis også komme ind Logo Logoet er resultatet efter flere måneders intens udvikling i egen designafdeling. Der har været afholdt workshops, møder og udført en masse arbejde henimod forskellige forslag. Det nye er en moderne overhaling i forhold til det gamle, det tager udgangspunkt i samme træ men er blevet mere ikonisk. Det gamle logo Det gamle logo er noget der er fuldt med siden skolen startede. Selve træet er et egentlig genbrug fra det dengang Ranum Statsseminarium. Her blev der blot tilført navnetrækket Ranum Efterskole til bomærket livstræet. Og lavet et væld af farvekombinationer. Det nye logo Det nye logo er mere stilrent og roligt. Cirklen og træets mere runde form skal indikere en jordklode. Hvor Ranum er i midten af cirklen. Derfor kan der anes en cirkel i midten. Grunden til, at vi blev ved det gamle træ og moderniserede det var, at der kom så mange tilbagemeldinger om, at træet betød så meget for dem og deres forståelse af Ranum Efterskole. Og der vil også være en fordel for tidligere elever, at beholde grundessensen i livstræet, eftersom alle de minder de har fået igennem skolen trigges ved synet af logoet. Logoet har været med på rejser, i tykt, i tyndt og igennem hverdagen. Ud fra konceptet ved logoet og nogle af de andre grafiske elementer, såsom billeder er der blevet sat den sfsdfsdfsdfsdfsdffddsfsdfsdfsdf34 34

36 regel, at logoet altid skal placeres i midten. For Ranum er stedet i midten (derfor er der nu også lavet en mindesten med Ranum et sted i midten.) Favicon Et favicon ser ikke ud af meget. Men det er med til at give et helhedsindtryk og det hjælper med, at få et hurtigere overblik hvis man har mange faner åbne hos brugeren. Hvis der kun var tekst ville det hurtigt blive ensformigt og man ville have svært ved at skille sig ud ved mange faner åbne. Med mindre de skriver med STORT. Informationsdesign Det kræver viden, fantasi, mod og tolerance at navigere i en kompleks verden. Samspillet mellem linjerne natursport og imagination skaber det levende læringsrum, som kan være med til at give den enkelte de sociale og faglige kompetencer, der kan være afgørende for at kunne begå sig i et levende og dynamisk samfund. Ranum Efterskoles værdigrundlag At udvælge information Ud fra mit spørgeskemas konklusion kom jeg frem til, at der skulle være fokus på: Fokus på rejser. Fokus på profilfag Fokus på billedgalleri Let og overskuelig. Kontakt via Telefon & . Testimonials. Det vil sige, at punkterne Rejser og Profilfag burde have sine egne punkter i navigationen. Men der er stor risiko for, at den bliver for lang og dermed uoverskuelig. Derfor bliver jeg nød til at lave et mindmap over de overordnede punkter for at få et nyt overblik og som fungerer som en informationsbriefing. Se den til sidst i informationsdesign-afsnittet. Eftersom fokus er rekruttering af nye elever skal navigationen afspejle dette og det som er mest relevant for at komme frem til tilmeld. Kvalitets- og tilsynsstyrelsen under Ministeriet for Børn og Undervisning har den 14. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf35 35

37 september 2012 udsendt vejledning på som skal følges med hensyn til hvilke punkter der SKAL findes på hjemmesiden. Disse er: Evaluering Opfølgningsplan Værdigrundlag Vedtægter Årsplan Indholdsplan Prøver Karakterer Disse punkter findes under Det lovmæssige i mindmappet i navigationsafsnittet. Brugerens krav Størstedelen af svarene fra spørgeskemaet viste, at mange elever satte pris på alle de rejsemål der tidligere var besøgt, som de kunne bladre igennem. Der var også stort krav om, at siden skulle være simpel og overskuelig eftersom der var alt for meget info på den gamle. Der vil blive sigtet alt unødvendigt informationskaos fra og kun satse på det som er relevant for en rekruttering. Forsiden Selve forsiden skal kunne stå for sig selv og give et fyldestgørende resume af resten af siden. Den skal i sig selv være nok til at starte AIDA. Men som der også står skrevet i Digital Media Management (Fischer & Oosterbaan 2010:147), så skal alle sider egentlig kunne fungere som en forside eller indgangssider. Dvs. hvis den besøgende kommer ind af en bagvej, en anden end forsiden, skal vedkommende stadig kunne se hvor man er kommet hen og stadig kunne foretage sig en effektiv rejse igennem siden. Derfor skal man kunne se hvilken side jeg er på, hvilke muligheder har jeg i min videre værd, og hvor er jeg på websitet? Der skal være tydelig angivelse af overskrifter og mulighed for at søge. Men, det var forsiden jeg kom fra og en egentlig opbygning af forsiden kunne se sådan her ud. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf36 36

38 Hvert punkt står for en vandret boks/kasse med det indikerede emne. De står oven på hinanden med pænt mellemrum. Slideshow Viser udvalgte billeder. Skal tænde for A i AIDA. USP 3 rejser til hele verden, Danmarks største udbud af profilfag, aktiviteter og rejser. 400 nye venner Interest i AIDA. Hvem er vi? Fortælle kort med tekst og billede hvem skolen er og hvad vi står for. Udsnit af fag En blanding af profilfag og internationale fag. Ramme bredt. Seneste rejser Billeder af seneste rejser fra sidste tur. Tidligere elever siger Testimonials fra spørgeskema. Desire i AIDA. Tilmeld / bestil rundvisning CTA knap med orange farve, ud fra designmanualen. Action i AIDA. Seneste nyheder 3,4 af de seneste nyheder med billeder Informationsbriefing, navigation & strukturering Med udgangspunkt i min kommunikationsplan og konceptbeskrivelse samt spørgeskemaet er jeg kommet frem til nedenstående brainstorm/mindmap over hele sidens indhold, overordnet set. Der er valgt en typisk hierarkisk struktur for selve hovednavigationen med top elementerne. Og en lineær struktur for forsiden med dens opbygning af informationsbokse oven på hinanden. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf37 37

39 Dog viste det sig hurtigt, at der var flere som havde afkodningsproblemer med kategorien efterskolen, med punktet Det har vi. Hvad betød det? Faciliteter? Fag? Ja, det skulle selvfølgelig vise alle de faciliteter skolen råder over. Så er gået tilbage i tænkeboks og kommet frem til denne. Med ovenstående nye mindmap og navigation har jeg ændret indholdet i kategorien Efterskolen. Interaktionsdesign Når der er tale om interaktion på eks et website er der 3 faser: Input Er brugerens input til vores medie. Såsom et klik med musen på et bestemt element. Behandling Er vores medies behandling af brugerens input. Eks en webserver der oversætter klikket fra brugeren og giver.. Feedback En ny side, en dialogboks, eller en form for bevægelse i et objekt der startes. Disse 3 faser er vigtige, at have en forståelse for, netop for at forstå helheden af den oplevelse man som afsender vil give sin modtager. Hvilke input tillader man, hvilken behandling skal der til og hvilket feedback vil vi give dertil? Hertil kan man blandt andet sfsdfsdfsdfsdfsdffddsfsdfsdfsdf38 38

40 bruge et flowchart, som jeg beskriver her under. Flowchart Jeg har lavet et, måske lidt indviklet, flowchart over 2 scenarier. 1, hvor den besøgende er en førstegangsbesøgende og evt. kommer fra sammenligningssitet efterskole.dk eller 2, så er den besøgende en som allerede har bestemt sig for at tilmelde sig skolen. Hver decision-boks står for mit tilfælde for den proces den besøgende overvejer, afkoder og til sidst afgør om det er noget der tiltaler vedkommende. Hvis ja, går man videre til næste trin, hvis nej, så har de værdier eller USP ikke været interessante for modtageren. Og denne besøgende kan være tabt for altid, eftersom hver ung som ofte kun går på efterskole ét år af deres liv. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf39 39

41 Præsentationsdesign Hvilke medieelementer vil jeg bruge på hjemmesiden? Er det nok bare med en hvid baggrund og sort tekst? Eller skal der tilføjes billeder og video? Tekst Tekst kan være en meget stærk faktor hvis den er skrevet rigtigt og tilrettelagt målgruppen. Men tekst kan også blive kedeligt hvis den er for lang eller ikke relevant. Derfor vil jeg benytte mig af korte afsnit af tekst og store overskrifter samt brødtekst. Det skal være med til at skabe fokus på de valgte budskaber. Og de skal kunne fordøjes relativt nemt og reageres ud fra. Vi ved, at hvis der er meget tekst på en hjemmeside så skimter vi hurtigt over det hele for at finde nogle keywords der kan tænde vores interesse eller ramme nogle overskrifter, som forklarer hvad der er hvad. Og ofte læser vi kun det første af linjen. Derfor er det især vigtigt, at overskrifter, afsnit og punkter begynder med ord målgruppen finder relevant og spændende. (Fischer & Oosterbaan 2010:160) Billeder Billeder kan sige mere end 1000 ord. De kan være med til at starte en bestemt stemning eller følelse og er med til at opbygge en bestemt oplevelse af det som det skal præsenteres. Hjemmesiden skal bruge en række billeder, som ud fra designmanualen skal forsøge, at vise følgende ting. Positivitet Spontant øjeblik Skandinavisk atmosfære Billederne skal være med til at sætte den besøgende i den rette stemning og skabe AIDAeffekten. Uden billeder vil vi have svært ved at virke troværdige og vise hvem vi egentlig er som skole. (Fischer & Oosterbaan 2010:161) Animation Animationer kan i de fleste tilfælde skabe ekstra liv og betydning til et budskab. Det kan eksempelvis være med til at give mere flow til et slideshow. Fade, slidein og push. Og er også noget jeg vil benytte mig af i slideshowet i toppen. Dog med en simpel fade. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf40 40

42 Animationer kan desværre også være til så stor irritation at de kan have negativ impact på den samlede oplevelse af produktet. Det ses ofte med store forstyrrende reklamer. (Fischer & Oosterbaan 2010:162) Video Med en video kan vi kommunikere vores budskaber mere levende, hurtigt og effektivt. Og det er samtidig det medieelement, som kommer nærmest en virkelighed og kræver ikke meget af os ved afkodning og forstå betydningen. De fleste af årene på nettet har Ranum Efterskole haft en video som præsenterer skolen. Sådan en har vi også i år og den vil blive brugt. Måske i slideshowet. (Fischer & Oosterbaan 2010:163) Lyd Lyde i digitale medier er næsten som ørene på et menneske. Uden dem kan det betyde en begrænsning i de følelser modtageren får ved oplevelsen af produktet. Lyd er især vigtig ved spil og underholdningsapps. På hjemmesider høres lyde sjældent i forbindelse med feedback eller oplevelser. Det er noget som mennesker ofte ser som irriterende og forstyrrende i privatsfæren. Eks hvis de sidder i et roligt miljø hjemme og surfer på internettet vil en pludselig lyd, hvad enten den er høj eller lav, være en enorm forstyrrelse. Lyde er der derfor ikke på vores hjemmeside med mindre, at vi aktivt tilbyder muligheden igennem eks en video. (Fischer & Oosterbaan 2010:164) Komposition Hvordan vi sammensætter, opbygger og grupperer de valgte medieelementer kaldes også for grænsefladekomposition. Det handler overordnet set om hvordan du gruppere de forskellige medieelementer på skærmen. Og hvordan brugeren navigerer rundt i produktet. Der findes et utal af måder og sammensætte en hjemmeside og de mest almindelige er hvor du placerer logo og navnetræk i venstre top med navigation til højre på samme linie. Herefter kommer selve indholdet og ofte med en sidebar i venstre eller højre side. I bunden er der ofte en footer med kontaktinfo eller CTA. I mit tilfælde vil jeg lave hjemmesiden delvist sådan, at bruge gammelkendte kompositioner med logo i toppen til venstre og navigation på samme linie. Men herefter vil der komme features i stacks. Jeg vil vise det yderligere i punktet Skitselayout. (Fischer & Oosterbaan 2010:166) sfsdfsdfsdfsdfsdffddsfsdfsdfsdf41 41

43 Opmærksomhedsniveauer Dette punkt handler om brugernes forventninger til hvor de forskellige elementer er placeret. Brugerne har vidt forskellige erfaringer hvad hjemmesider angår men de fleste har set de største danske og udenlandske hjemmesider, såsom DR, Facebook, Youtube osv. De har alle sammen 1 ting til fælles, de har logo placeret øverst til venstre og navigationen horisontalt til højre for logoet. Det er derfor også noget der spiller ind ved brugervenlighed. Så hvis jeg vælger at placere eks logo i højre top og navigationen vertikalt i midten vil det helt sikkert forvirre mange. Selvom ideen kunne være nok så god. (Fischer & Oosterbaan 2010:166) Skitselayout Med denne skitse får man en grundide om hvad der er i sigte. Den tager delvist udgangspunkt i photoshop-udkastet med temaet Purity 3. Der er stor fokus på det visuelle og enkle udtryk, men samtidig må det ikke føles for tomt eller uinteressant. (Fischer & Oosterbaan 2010:169) Gestaltlove Jeg benytter mig af gestaltlovene på hele siden. Og noget kommer bevidst fra udviklerne af et af de 2 temaer jeg vil benytte mig af. Loven om lighed er brugt på menuen og dens undermenu. De ser anderledes ud hver især, men der er stadig ligheder såsom farven og teksten. Loven om lukkethed kommer også til udtryk i de horisontale kasser, som vil opfattes som hørende sammen. Der bliver også brugt loven om nærhed i de forskellige tekstafsnit med overskrift og en brødtekst, som står relativt tæt på hinanden. De fremkommer som hørende sammen pga. den korte afstand. (Fischer & Oosterbaan 2010:169) sfsdfsdfsdfsdfsdffddsfsdfsdfsdf42 42

44 Kontraster Ud fra de fire grundlæggende konstraster: Størrelseskontrast, styrkekontrast, formkontrast og farvekontrast benytter jeg den sidste til, at adskille elementer på forsiden. Med kontrasten er der også tale om loven om ligheder, eftersom kasserne grundlæggende er lig hinanden men kontrasten gør dem skiftevis forskellige. Dette er ikke illustreret på skitselayoutet. Her har hver boks samme farve men det førnævnte er hensigten. (Fischer & Oosterbaan 2010:170) Farver Designmanualen består 5 overordnede farver til brug i brevpapir, signature, visitkort osv. Og selvfølgelig til brug på hjemmesiden. Aquamarine i RGB (77,186,178) Indigo i RGB (76,50,114) Orange i RGB (242,148,0) Aquamarine er vores primære farve. Indigo er sekundær og orange er vores call-toaction farve. Silver og anthracite er farverne til tekst. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf43 43

45 Typografi Hvad er en god skrifttype? Skal den være let læselig eller skal den se vild og kaotisk ud? Det kommer helt an på modtageren. Her i vores tilfælde er det de unge mellem årige. Her er der blevet valgt en meget smuk, enkel og ren font, ved navn Accord Alternate Family. Den består blandt andet af thin, medium og regular. Denne font vil blive brugt på hjemmesiden. I designmanualen er det også bestemt, at Georgia Italic & Bold Italic skal bruges til citat. Implementering Joomla Joomla er et Open source Content Management Framework (CMF) som udvikles af mange forskellige mennesker med forskellige tilknytninger til Joomla Projektet. Overordnet set er der to arbejdsgrupper, en leder gruppe og en produktionsgruppe som står for den officielle udvikling af projektet. Herunder kan alle, du og jeg, bidrage til projektet hvis vi har interessen. Joomla er baseret på PHP(Serverside scripting sprog) og MySQL(database) som er gratis at benytte ud fra deres licenser(php-license+gpl), dvs. alle kan forvandle sin windows/linux pc til en mini-server og køre Joomla herpå. Eller køber et egnet webhotel med PHP/My SQL understøttelse. Joomla nævner selv på deres about site, at det ofte bruges til: Corporate Web sites eller portaler Corporate intranets eller extranets Online magazines, aviser, and publications E-commerce and online reservations Government applications Small business Web sites Non-profit and organizational Web sites sfsdfsdfsdfsdfsdffddsfsdfsdfsdf44 44

46 Community-based portals School and church Web sites. Personal or family homepages ( Og derfor er det ikke særligt velegnet til eks en fotoblog hvor du gerne vil tilbyde dine besøgende, at kommentere på dit indhold. Joomla kommer nemlig som standard ikke med kommentarer eller store blog-layouts. Her må man i stedet benytte eks wordpress hvis det skal være ren blogging. Men selvfølgelige kan du udvide Joomlas funktionalitet med en af de mange tusinde extensions, her er der også en til kommentarer. Ydermere er Joomla et af de mest benyttede CMF/CMS og er det andet mest brugte system hvis man skal tro og deres undersøgelser. Den popularitet er med til at holde udviklingen i gang og forbedre sikkerheden løbende, som er yderst vigtigt i dag. Grunden til mit valg af Joomla er dels de store udvidelsesmuligheder med extensions, temaer som er nemme at tilpasse(via css & html) og den store fokus på sikkerhed. Der er eks mulighed for at aktivere en two-factor authentication ved login, som kommer med som standard. Men også, at det ikke som standard er sat til at være et bloggingsystem, men i stedet et system hvor du skriver artikler, som placeres i kategorier og til sidst sættes til live via menupunkter. Det egner sig godt til sider som ikke skal kommenteres på eller ændres mere end et par gange om året. Med den måde Joomla håndterer indhold på med artikler, kategorier og menuer bliver det til et stærkt værktøj ved hjemmesider med mange undersider/artikler. Det passer rigtig godt til vores efterskole. En anden og lige så vigtig grund til den fortsatte brug af Joomla er, at skolen har kørt med det i adskillige år og har opbygget en vigtig erfaring om brugen af systemet, som er for værdifuld til blot at smide væk. Template For at imødekomme en stram deadline og stadig komme med et lækkert udtryksfuldt design, har den bedste mulighed været, at benytte et allerede lavet tema til den hjemmesideplatform vi allerede benytter, joomla. Temaet bliver ændret så det overholder de forskellige retningslinier defineret i designmanualen. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf45 45

47 Ja_Sugite Sugite fra Joomlart er et tema, som baserer sig på en moderne brugergrænseflade idet at den benytter et responsive tema som tilpasser sig til den opløsning den givne device er sat til. Temaet er foruddefineret til, at kunne bære store størrelser af skrifttyper. Den kører samtidig med fuldbredde billeder i slideshowet og de skiftevis farvede indholdsbokse går også ud til siden, som alt i alt giver et beget rent, vel nærmest minimalistisk udtryk og giver plads til præcise afsnit med lækker tekst og billeder eller video. Moduler I brugen af temaet ja_sugite vil jeg benytte en light udgave af deres slideshow som tilbyder flere forskellige muligheder for animationseffekter af medieelementer. Men med vores koncept skal jeg blot bruge en simpel fade med store billeder. Der vil også blive installeret formular-værktøjet RSjoomla, som vi i forvejen bruger til samtlige af vores formularer. Det er et back-end værktøj som flere af vores ansatte i forvejen kan finde ud af at bruge. Akeeba backup vil også blive installeret eftersom det bruges til at tage fulde backups af hjemmesiden og det er inkl. MySQL data. Det er hermed nemt at lave en hurtig recovery i nødstilfælde (med mindre man har glemt at hente seneste backup..). Nyhedsbrev, er noget forstanderen skal bruge til sit ugentlige udsendelse af nyhedsbrevet som skrives og sendes ud hver fredag. Det opsamler hele ugens aktiviteter i ét brev. Det brev kommer herefter ind i bloggen/nyheder. Brugervenlighedstest Prototypetest Prototypetesten har jeg foretaget igennem et interview med min kollega, Kurt Andersen, som ikke har set siden endnu. Han skulle give feedback på kompositionen af navigationen og opbygningen af forsiden. Han var meget begejstret for de forskellige fordele man skulle igennem og fik indtrykket af et meget moderne og responsive website. Ved navigationen bemærkede han, at de store fullsize billeder godt kunne dække for menupunkterne. Det har jeg taget til mig og ændret. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf46 46

48 Websitetest Ydeevne Ydeevnen er vigtigt at teste ikke mindst for brugervenligheden. Hvis siden er for langsom eller tung at danse med er der større risiko for, at man mister den besøgendes tålmodighed. Søgemaskineoptimering Jeg benytter mig af clean URLs eller rene links. Noget som oversættes automatisk. Det betyder at et link som måske hed ranumefterskole.dk/index.php/efterskolen/om-os.php i stedet hedder ranumefterskole.dk/efterskolen/om-os Det hjælper blandt andet på søgeoptimeringen ved de forskellige udbydere af søgning. Men det hjælper også hvis du skal skrive linket ned eller huske det til næste gang. Jeg benytter mig af tydelige titler på hver side eftersom det er den tekst, som popper frem som overskrift hos google. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf47 47

49 Skærmopløsning og foldline Jeg har undersøgt vores google analytics igen. Denne gang hvilke skærmopløsninger der er mest populære på vores hovedside. Der er taget data for april-maj måned. Det ser sådan her ud. Det viser sig, at der er relativt mange enheder med en lav opløsning, som bare beviser vigtigheden af et responsive tema / layout. Den sædvanlige 1366x768 opløsning er også her den mest normale og det er denne opløsning jeg sigter efter, som minimumsopløsning. Opløsninger lavere vil gå over i tillpassede layouts automatisk. Konklusion For at kunne lave hjemmesiden under denne relativt korte tidsramme har det været ideelt at arbejde med temaet ja_sugite i Joomla. Den har medvirket til, at jeg hurtigt har kunnet starte med at tænke på indhold i stedet for kodning af et custom cms. Det har også været nemmere at ændre stylesheets, så den passer til designmanualens farver og krav. Rekrutteringsdelen har været det store fokus punkt og det er nået i mål med tydelige CTA (Meld dig ind) og via en forside, som opsummerer skolens USP på en frisk og effektiv måde. Der er stadig gjort plads til at informere med eks en oversigt over samtlige fag (boglige fag, profilfag, klubaktiviteter osv). Jeg fandt dog ud undervejs ved målgruppeanalysen med spørgeskemaet, at der var en del, som ikke så hjemmesiden som vigtigt i forhold til at påvirke deres valg af skole. Det var en helt anden ting som åbent hus og ved andet materiale som aviser osv. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf48 48

50 Perspektivering Jeg fandt hurtigt ud af, at det med at få afholdt møder var en svær opgave eftersom skolen har været inde i en ekstrem travl periode. Det er noget jeg har savnet og kunne have gavnet projektet. En af de ting jeg vil arbejde videre med her efter aflevering er et ekstra produkt, som præsenterer de ansatte med en kort video af dem selv via en digital publikation der kan hentes via ipad. Det skal laves i InDesign. Processrefleksion I dette sidste projekt ved UCN har jeg arbejdet alene for anden gang (første gang var ved skolestart, port folio tror jeg det var). Det har dels været befriende at være den eneste man skulle sparke igen og motivere. Det har også været betydeligt mere lærerigt, at arbejde alene netop fordi man skal omkring alle facetter alene. Dog når jeg lægger det op på en vægtskål vil jeg hellere have været i en gruppe så man kunne brainstorme sammen, researche sammen og skrive sammen. Det er sku lidt kedeligt at arbejde alene men samtidig befriende da der kun er en selv til at kritisere ens arbejde. Og tror ikke jeg har følt mig stresset eller haft programmør -svedpletter under hele perioden. Noget jeg især havde ved de andre projekter hvor vi skulle skrive sammen i længere tid ad gangen. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf49 49

51 Litteraturliste Fischer & Oosterbaan, Louise Harder & Marie (2010): Digital Medie Management. Nyt teknisk forlag. Viktor Rasmussen & Harder Fischer, Christian & Louise (2008): Målgruppeanalyse - Lær din målgruppe at kende. Nyt Teknisk forlag. Busch, Anne Mette (2011): Kommunikation i multimediedesign. Hans Reitzels Forlag Optimizing-Your-Site sfsdfsdfsdfsdfsdffddsfsdfsdfsdf50 50

52 Bilag Dagbog D. 14. maj. Jeg er ved at køre igennem min konkurrentanalyse og jeg ser, at eisbjerghus.dk egentlig har mange af de elementer(logo i midten, USP på forsiden, rundt koncept i billeder osv), som vi også har snakket om at lave på vores hjemmeside. De har en god informationskommunikation. Men de har så også lige fået opdateret deres hjemmeside for da jeg foretog min indledende researchindsamling havde de en helt anden side(marts). Ergo, tingene går hurtigt(også her) i efterskoleverden (Som jeg også kom ind på i SWOT-analysen). De er heldigvis langt fra så stilrene som vi med vores nye designmanual, højst sandsynligt bliver. Jeg kan se, at det er et købt tema til brug i WP. Samme dag d. 14. maj. Ha! Himmerlandscentrets Idrætsefterskole ligner en lokalbank (Tidligere Sparekassen Himmerland). sfsdfsdfsdfsdfsdffddsfsdfsdfsdf51 51

53 Bilag 1. Analyse af gammelt website. Se billedet i orig. Størrelse på eller i mappen analyse af gammelt website på DVD en. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf52 52

54 Bilag 2. Research af konkurrenterne Se hele pakken med de 252 screenshots i mappen research_alle efterskoler_ungdomsskoler i DK 2014 marts_frontpages på DVD en. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf53 53

55 Bilag 3. Spørgeskema Undersøgelse af hjemmesidens påvirkning. sfsdfsdfsdfsdfsdffddsfsdfsdfsdf54 54