Guds Fred Grafisk produktionsforståelse

Transkript

1 Guds Fred Grafisk produktionsforståelse Jeg skulle lave hjemmeside og logo for Guds Fred, som er et musikalsk projekt af Thomas Kallehave. 35

2 Idegenerering Udtryk og symbolik Efter at jeg havde aftalt med Thomas, at jeg skulle lave dette projekt, holdt vi et hangout møde. Her snakkede vi en masse om, hvad projektet skulle udstråle, og hvordan vi skulle gøre det. Vi brainstormede, og vi kom frem til, at projektet skulle udtrykke: Ansvar Jeg har haft alt ansvaret for opgaven, men jeg har lavet det hele i dialog med Thomas. Målgruppe Musikken er henvendt den, der søger fred og sindsro, ung som gammel. Afsender Guds Fred v. Thomas Kallehave Rolig/fredlig atmosfære Overskuelig og ikke larmende Stilren Vi vil opnå dette ved at udarbejde et simpelt logo, og så anvende rolige naturbilleder i stor stil på siden. Logo Udviklingen af logoet har været en længere proces med mange skitser, former og figurer. Se produktet på Men efter en lang udvælgelses proces med en masse skitser, kom vi frem til at, det enten skulle være korset eller flammen, der skulle være symbolet i logoet. Vi endte med at vælge den simple flamme. Den forestiller en fyrfadslys-flamme, som oftest forbindes med fred og tryghed. Musikken skal også være med til at lyse i verden. Sidst men ikke mindst, så er korset også et meget mere brugt symbol, og derfor vil det være svært at få særlig meget gengendelsesværdi ud af det. 37

3 Billedestil Billederne er en blanding af billeder, jeg selv har taget, og nogle en veninde har taget med mit kamera på en vandretur. Alle billederne samlede jeg og lavede en photoshop effekt med justeringslag, som jeg kopierede ud på de forskellige billeder, for at få et ensartet udtryk. Frontend udvikling Da vi vidste, hvordan vi ville have hjemmesiden til at se ud, gik jeg igang med frontend udviklingen. Alle design detaljer var endnu ikke på plads, men jeg valgte at starte med udviklingen alligevel, da nogle ting først rigtig kan prøves af, når der er en prototype klar. Med LESS er det muligt at have sit stylesheet modulært opbygget i forskellige filer, men stadig at compile det til en enkelt CSS fil. Fælles for alle billederne er, at jeg har anvendt meget sharpen for at få lidt et»støvet«udtryk. På hjemmesiden har jeg herefter gjort billederne lidt mørkere for at få mere af det rolige/dæmpede udtryk frem. Webdesign Da vi var færdige med at finde udtrykket til projektet, gik jeg igang med at lave et webdesign. Webdesignet er bygget efter, at nemt skulle kunne gøres responsivt, og at der skulle være en mulighed for nemt at kunne høre sangene online samtidigt med, at man kan læse teksterne. Jeg startede med at udvikle frontenden lokalt, hvor jeg anvendte HTML5, LESS (preprocessor til CSS) og Javascript med jquery. Jeg anvendte Brackets som editor, hvor det her er muligt at se ens resultat live, imens man koder. Det sparer rigtig mange vindueskift og sideindlæsninger. Anvendelse af LESS: Her ses forskellige anvendelser af LESS fordele Udover disse fordele, er det også muligt at anvender variabler, mixins og meget andet smart. Det sparer udvikleren for rigtig meget arbejde. Det er også muligt at lave nested styling, altså at definere forskellige properties indeni en anden. Der er siden kommet en del justeringer til designet. F.eks. fandt jeg ud af, at det på mobil er meget mere hensigtsmæssigt at have Menu knappen i højre side, da det er sådan de fleste gør, og fordi det er nemmere at nå, når man betjener mobilen med højre hånd (hvilket de fleste gør). Ovenstående ville blive compilet til: 39

4 Anvendelse af Javascript: For at få en musikafspiller, som virker på alle enheder, anvendte jeg jplayer. På denne måde var det ikke nødvendigt at genopfinde den dybe tallerken. Det medfølgende udseende passede dog slet ikke ind i mit design, så jeg har derfor redesignet hele afspilleren, men anvender stadig samme bagvedliggende Javascript bibliotek. Backend udvikling Jeg har implementeret siden i CMS et Umbraco, som er et Open Source.NET baseret CMS, hvor man kan skræddersy systemet til at passe til ens behov. Anvendelsen af et CMS gør, at det er let at oprette og redigere i indhold på siden. Jeg har selv lavet funktionen, der viser og skjuler tekster på siden, baseret på playerens timeupdate callback. Jeg har f.eks. lavet en funktion, så man let kan tilføje lyrics til sangene på siden. Disse bliver trukket ud og får en data-attribute med det antal sekunder, inde i sangen, de skal fremgå, og dette bliver læst af javascriptet, som skjuler/viser vha. den tidligere beskrevne funktion. Udover dette har jeg skrevet en funktion til Parrallax effekt på baggrunden på tekstsider. Jeg flytter elementerne modsat af den vej, man scroller. På den måde laver jeg en illusion af dybde i billedet. Dette giver en mere interaktiv følelse af siderne, som nemt kan blive uinteressante, når det bare er tekstsider. 41

5 Kvalitetsvurdering Jeg er rigtig glad for resultatet, da vi har ramt den ønskede stemning og udtryk. Og samtidigt har vi fået det sat op således at, det er let at tilføje nyt indhold til siden og redigere i eksisterende. Efter vi fik sat siden op, var der dog nogle ting, som blev ændret. F.eks. fandt jeg ud af, at det var mere hensigtmæssigt, hvis menuen sad i den modsatte side, og at logoet blev indsat øverst til venstre, så man altid havde en genvej til forsiden uden at skulle åbne menuen. Kodemæssigt er siden også blevet af rigtig høj kvalitet, da den er hurtig, valid og struktureret opbygget. 43