SVENDEPORTFOLIO // BJØRN NYBORG

SVENDEPORTFOLIO // BJØRN NYBORG 1 bjornnyborg.com/svendeproeve

Indhold GRAFISK DESIGN TYPOGRAFI OG OMBRYDNING GRAFIK OG BILLEDBEHANDLING GRAFISK PRODUKTIONSFORSTÅELSE 5 14 24 34 3

Grafisk Design Jeg har lavet grafisk identitet og hjemmeside til min fritidsfreelance virksomhed»bjørn Digital«. Hjemmesiden skal være nytænkende, nem at navigere i, og de vigtigste oplysninger skal altid være synlige. SVENDEPORTFOLIO // BJØRN NYBORG 5

#digital_effektivisering Jeg elsker at hjælpe virksomheder med at få en mere effektiv arbejdsgang. Jeg tilbyder en bred vifte af digitale services og kan der igennem hjælpe virksomheder med at få realiseret deres smarte ideer. Eksempelvis har jeg været med til at udvikle systemer til både: lagersyring, dokumentopbevaring og tidsregistrering. Ansvar Jeg har selv haft ansvar for opgaven, da jeg selv er kunden. Jeg har dog haft kammerater fra branchen til at komme med feedback på designet. Idégenerering Inden jeg gik igang med projektet, lavede jeg en brainstorm. Ud fra denne udvalgte jeg de ord, som skulle kendetegne mit design. Specielt delen med at skulle være anderledes, men samtidigt informativt, var noget jeg meget gerne ville ligge vægt på, da jeg vil udstråle, at jeg er ung og nytænkende. Målgruppe Min målgruppe er nytænkende virksomheder, som mangler en til at realisere deres ideer. Professionelt Informativ Responsive webdesign Medievalg Jeg har udarbejdet: Logo, visitkort og hjemmeside. Derved har jeg lagt en grafisk stil igennem både digitale og trykte medier. Men da jeg primært beskæftiger mig med det digitale, vil de trykte mediers hovedformål være at henvise til hjemmesiden. Logo Stilrent Noget man ikke ser hver dag Bjørn Digital Kode Distribution Det færdige resultat kan ses på http://bjorn.digital. Kvalitet Webdesign Troværdigt Visitkort SVENDEPORTFOLIO // BJØRN NYBORG 7

Farver Typografi Til primær farve har jeg valgt en blå. Dette er for at give et seriøst udtryk som udstråler tillid, rolighed og sikkerhed. Min sekundære farve (og skriftfarve) er en helt mørk grå, som næsten er sort, hvilket giver en let læsbarhed på hvid baggrund, hvilket er blevet brugt i produktet. Dette gør, at teksten er blødere for øjnene at se på, end hvis det havde været en ren sort. Primær farve #083d5d Sekundær farve #222 Som skrifttype har jeg valgt at bruge»roboto Slab«. Det er en serif-font, som er kraftigt inspireret af de groteske skrifter. Dette giver et moderne udtryk, som samtidigt viser seriøsitet og kvalitet pga. fødderne. Jeg har valgt denne, da den passer godt til det jeg ønsker at brandet skal udtrykke. Samtidig kan den både bruges på de trykte og digitale medier. Rubrikker er skrevet i Roboto Slab Bold Brødteksten på siderne er skrevet med Roboto Slab Regular, Bacon ipsum dolor amet bresaola fatback pork chop cow spare ribs. Frankfurter ham spare ribs meatloaf. Prosciutto biltong hamburger tail bacon ham hock. Bresaola shoulder turducken cow. Spare ribs beef shoulder, chicken. Skriftfarven er hvid (negativ) de steder, teksten står på den primære eller den sekundære farve. Billeder Jeg har valgt at give billederne et overlay med min primær farve, for at skabe et meget gennemgående udtryk. Billedetonen er lavet vha. Gradient Map i Photoshop. Tertiær farve #fff Vi er ved at have så høj opløsning på de skærme, vi anvender i dagligdagen, så det problem, der tidligere har været med at læse serif-fonte på en skærm, er nærmest ikke eksisterende længere. Logo Jeg ønskede at lave et logo, som var super simpelt, men samtidigt afspejler, hvad jeg laver, og indeholder og indeholder navnet på mit firma. Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. Google Fonts Billederne, jeg anvender skal udtrykke et moderne og seriøst arbejdsmiljø, samt være et udtryk for kvalitet. Derfor valgte jeg at anvende et sæt Tuborgklammer, som er et symbol på programmering, da de bliver brugt i rigtig mange sprog til at indramme funktioner. Visitkort Til visitkortet har jeg valgt at anvende billedet fra forsiden på hjemmesiden, samt et simpelt logo og slogan. Dette skaber en god sammenhæng imellem det trykte og min hjemmeside. Inspirationen til logoet kom»brackets«logo, som er den kode editor, jeg anvender til dagligt. Jeg har valgt at bruge min primære font i logoet, for at skabe sammenhæng.»bjørn«står med fed. Dette er for at fremhæve, at det er en personlig freelance virksomhed. Brackets SVENDEPORTFOLIO // BJØRN NYBORG 9

Koncept Lige nu er hjemmesiden en onepage side, der indeholder grundlæggende information om firmaet, referencer og kontaktoplysninger. Der er dog lavet klar til, at den nemt kan udvides med flere undersider, når der kommer mere indhold til siden. Navigation Jeg har valgt, at den horisontale navigation skal bruges til at navigere rundt på forsiden, hvor de vigtigste informationer findes. Når der kommer mere indhold på siden, kommer»burger-menuen«i brug, hvor man vil kunne finde yderligere info. På mobilen gemmer vi alt indholdet under burger-menuen, for at få en app-feeling når man navigerer rundt på siden. Layout Jeg startede med at layoute hjemmesiden i Photoshop, hvor jeg kom frem til konceptet med, at hver sektion skulle fylde en hel skærmhøjde (med mindre man har en lille skærm, så skal man bare kunne scrolle). Layoutet er sat op efter bootstraps 12 kolonner, så jeg på den måde let har kunne implementere webdesignet i bootstrap, og derved også udnytte frameworkets responsive funktionalitet. Implementering i Umbraco Da hele frontenden var gennemtestet og responsivt, gik jeg igang med at implementere hjemmesiden i Umbraco. Umbraco er mit foretrukne CMS, da det er yderst fleksibelt, og man har 100% kontrol over al koden, der bliver outputtet. IDenne implementering er opsat således, at det er let at tilføje nye kunde cases, nye undersider, samt redigere i indholdet på siden. Udvikling af frontenden Da designet var færdigt, gik jeg igang med at udvikle min HTML/LESS/JS lokalt på min computer. I denne fase sørgede jeg også for, at hele designet var responsivt, og testede på forskellige skærmstørrelser. Kontaktformularen er også opsat til at sende en mail direkte til mig, når den bliver udfyldt. SVENDEPORTFOLIO // BJØRN NYBORG 11

Brug af animationer Der er anvendt animationer på siden, de steder, hvor det giver mening. Når man trykker på pilen, der viser videre på siden, bliver man scrollet ned, i stedet for, at man bare»hopper«ned. Når man åbner mobilmenuen, slider den ind fra den side, man åbner, og ud igen, når man lukker. Når man holder musen over»send«knappen ved kontaktformularen, så animerer baggrunden for at illustrere, at den»sender det videre«. Kvalitetsvurdering Kvalitetskontrol Jeg har anvendt forskellige online værktøjer for at sikre, at det tekniske er iorden på hjemmesiden. Billedeoptimering Jeg har optimeret billederne vha. Kraken. io, selvom jeg gemte billeder med»save for web«i Photoshop, så kunne denne service stadig skære 10-25% af billedestørrelsen uden at ødelægge kvaliteten. Det er primært unødvendig meta data den fjerner. Google Pagespeed Hastighed: 99/100 (Sidste point er caching af Google Analytics, det har jeg desværre ikke mulighed for) W3C Validator Min markup bliver valideret uden fejl eller advarsler. Designet som helhed Jeg har bedt flere bekendte komme med deres objektive mening om resultatet, og i den feedback jeg har fået, har nøgleordene været»innovativt, Anderledes, Simpelt, Elegant«. Jeg er rigtig glad for resultatet, da jeg har opnået målet om et anderledes og nytænkende design, der stadig er utrolig enkelt at navigere i og viser de nødvendige oplysninger omkring mig og firmaet på en enkel måde. Rent teknisk er jeg endt med et produkt, som scorer godt i de forskellige tests. Brugeroplevelse: 100/100 SVENDEPORTFOLIO // BJØRN NYBORG 13

Typografi og ombrydning Odense Bys Museum ønskede at genoplive projektet»en eventyrrejse med H.C. Andersen«. I den forbindelse skulle der udgives en novellesamling i hardcover med 9 udvalgte noveller af H.C. Andersen. (Opgaven er en skoleopgave) SVENDEPORTFOLIO // BJØRN NYBORG 15

Layout Ansvar Jeg har været alene om ansvaret for at få løst opgaven, men jeg har brainstormet sammen med et par klassekamerater. Målgruppe EN EVENTYR REJSE Der var ikke en specificeret målgruppe på opgaven. Dog har jeg valgt at fokusere på den modne læsergruppe, da det tidligere projekt henvendte sig til den yngre. Jeg har derfor forsøgt at ramme et rent og eksklusivt udtryk. Marginer Jeg har sat mine marginer efter ABCD princippet, for at få den optimale sideopbygning. Jeg har anvendt»de lige store søjlers«og»diagonal«-metoderne, for at få placeret mine marginer optimalt. Kolonner I det layout, hvor jeg anvender kolonner, har jeg 8mm luft, for at overholde lov om nærhed ift. mellemrubrikker. Format Kravet til formatet på bogen var 155 x 230 mm Bleed Der er afsat 3mm til beskæring. Baseline grid For at opsætte baseline griddets start korrekt, har jeg taget min margin i toppen og lagt sammen med 2/3 af min skriftstørrelse. Det gav næsten det ønskede resultat. Herefter justerede jeg en smule, så vi endte med at starte ved 22,7 mm. Jeg har været inde at ændre min basic-text-frame style til at sætte baseline efter Cap Height i stedet for Ascent. SVENDEPORTFOLIO // BJØRN NYBORG 17

Masterpages Brødtekst Master Page A Basis layout med sidetal og»running Header«. Master Page B Layout til novelle starter. Placeholder til introbillede, samt blå gennemgående grafik. Master Page C Dobbelt kolonnet Layout til fakta opslaget bagerst i bogen. Til brødteksten har jeg anvendt Lora, som er en let læselig serif font. Den har et kunstnerisk islæt i form af detaljer i bogstavernes serifer. Dette passer godt til den kreative H.C. Andersen. Lora er også en open-source skrift. RUBRIK Brødteksten på siderne er skrevet med Roboto Slab Regular, Bacon ipsum dolor amet bresaola fatback. Skriftstørrelse Brødteksten er sat i 10/14pt, da det er en størrelse alle i målgruppen kan læse. Linjeafstanden er i den høje ende, for at øge læsevenligheden, samt for at undgå, at bogen bliver for tung at læse. Rubrikker Rubrikkerne er sat med den stilrene sans-serif»raleway«, som findes i en»thin«udgave. Dette gav det rene udtryk i rubrikkerne, som jeg ledte efter. Rubrikkerne er sat i 22/27pt og alignet til griddet. Jeg har valgt at køre rubrikkerne i allcaps og centreret for at bidrage til det rene look. Raleway er desuden en open-source font, så den er tilgængelig for alle. Linjelængde Linjerne er ca. 65 tegn i brødteksten. Det er en læsevenlig længde, dog lidt til den lange side. Det kompencerer jeg for ved at have lidt højere linjeafstand. Justering Jeg har valgt at sætte brødteksten med fast bagkant for at igen at opnå det rene udtryk, og en god læsbarhed. Afsnitsmarkering Jeg har valgt at køre med luft mellem afsnittende (mellemslag) i stedet for indrykning, for at dele tekst mængderne mere op i spiselige bidder. Underrubrik Denne er dog sat med Lora Italic, for at distancere den lidt fra den egentlige rubrik, da den fungerer som en byline. SVENDEPORTFOLIO // BJØRN NYBORG 19

Udligning/justeringer Justering af brødtekst For nemt at kunne lave knipning og spærring af brødteksten, har jeg oprettet to versioner af brødteksten til dette. Udover disse to versioner, har jeg været nødt til at lave en del manuelle justeringer for at få det hele til at gå op. Udligning af rubrikker Jeg har manuelt udlignet rubrikkerne Uncial Første bogstav i hver novelle har jeg valgt at sætte som et unicial. Paragraph stylen er baseret på brødteksten, men med»drop Caps«sat til at spænde over 3 linjer og 2 karakterer. Jeg har herefter justeret først linje ind til unicialet, og efterfølgende 2 linjer er rykket ind med en tab. Indholdsfortegnelse Automatisk indholdsfortegnelse Jeg har lavet en automatisk indholdsfortegnelse, som finder alle rubrikker og kapitler og indsætter disse fra hele min book. Papirvalg og omslag Papir Jeg har valgt et 135g Book papir, hvis bogen skulle trykkes, da det giver en høj kvalitetsfølelse. Figursats På bagsiden har jeg lavet en figursats, som danner en silhuet af H.C. Andersen. Denne er så spejlet som en skygge på forsiden. Dette er lavet som grafisk effekt for at fange en evt. køber, der lige tager bogen op fra boghylden. Afstande Der er på omslaget taget højde for: 3mm nedbrænding og formering 30mm Ombuk 10,2mm Ryg (Beregnet med online beregner) Preflight Jeg har opsat en preflight profil, som jeg har gennemgået alle dokumenterne, i min book, med. Den tjekker for: Missing links Opløsning på billeder min. 300ppi Overset text Missing fonts Missing glyphs Styling med nested styles Jeg har anvendt nested styles til at kunne få det ønskede udseende på min indholdsfortegnelse. SVENDEPORTFOLIO // BJØRN NYBORG 21

Eksportering Booken blev eksporteret samlet vha. Indesigns eksporter Book til PDF funktion. Eksporteringen foregik i både i spreads og pages efter instruktioner fra opgavestilleren. Alle billeder blev nedskaleret til 300ppi (hvis de var større). Jeg konverterede dokumentet til Fogra39 farveprofilen med»preserve numbers«, men inkluderede den ikke i PDF en, for at undgå en evt. dobbeltprofilering. Desuden er der tilføjet»all printer marks«, og bleed bliver hentet fra dokumentets indstillinger. Kvalitetsvurdering Jeg er tilfreds med resultatet, da jeg har opnået det ønskede udtryk. Jeg har også overholdt mange typografiske retningslinjer, men stadig fået et resultat, som skiller sig lidt ud fra den gængse bog. Jeg er efterfølgende kommet til at tænke på, at jeg skulle have givet den lidt ekstra indvendig margin, og derved får en lidt kortere linje længde, og samtidig kompensere for nedfaldet i ryggen på bogen. SVENDEPORTFOLIO // BJØRN NYBORG 23

Før Grafik og billedebehandling Efter Andersen Furniture skal have lavet et billede hvor, deres møbler indgår i et moderne køkken, til brug i en kampagne. Eksisterende spisebord og stole skal fjernes, og Andersen Furniture møbler skal indsættes. (Opgaven er fiktiv, men baseret på en virkelig opgave) SVENDEPORTFOLIO // BJØRN NYBORG 25

Før billeder Fotografen leverede højopløste JPG filer af møblerne, og selve køkken billedet er et stock foto. Ansvar Jeg har selv stået for udarbejdelsen af opgaven, men har fået inspiration fra de andre grafikere på Ørskov gruppens lignende opgaver Målgruppe Andersen Furniture henvender sig til designbevidste personer, som ønsker højkvalitets design møbler. Resultatet skal udstråle kvalitet og stil. Afsender Andersen Furniture Se evt. hele processen som screencast på min hjemmeside: http://www.bjornnyborg.com/grafik-og-billedebehandling SVENDEPORTFOLIO // BJØRN NYBORG 27

Opsætning af dokument Opløsning: 300 ppi Farverum: Adobe RGB (1998) Jeg har behandlet billedet i så stor en størrelse som muligt, for at have en non-destruktiv arbejdsgang, og for at resultatet vil kunne anvendes til trykte medier. Jeg har arbejdet i Adobe RGB farverummet, fordi det er det, min skærm anvender. Så på denne måde opnår jeg størst mulig farvekorrekthed. Desuden arbejder jeg i RGB, fordi det er et større farverum. Efter min retouchering gik jeg igang med at fritlægge de elementer, der skulle anvendes 2). Fritlægningen er udført ved at lave en udvælgelse med pen-tool, og herefter lave en maske på baggrund af denne udvælgelse. Jeg har hele tiden holdt de forskellige elementer i separate filer, for at have en non-destruktiv arbejdsgang. 2a En evt. konvertering til CMYK vil først finde sted ved genereringen af den trykklare fil. 2b Fremgangsmåde Det første, jeg gjorde var at få fjernet det eksisterende bord på stock-billedet 1). Det var en stor udfordring pga. spejlningerne i gulvet, men det lykkedes vha. en masse Content Aware, Clone Stamp Tool og Spot Healing Brush. 1 2c SVENDEPORTFOLIO // BJØRN NYBORG 29

Da jeg var tilfreds med fritlægningerne, indsatte jeg de forskellige elementer, som smart-objects, og anvendte transform tools til at justere perspektiverne helt på plads 3). 3a Herefter har jeg maskeret de forskellige møbler, så de fremstår bag planterne. Her har jeg anvendt en brush til at lave masken 4). For at tilføje lidt hjemlighed til køkkenet, lavede jeg et ur til væggen 8). Herefter gav jeg elementerne lidt skygger, så det ser ud som, uret rent faktisk hænger på væggen. Til sidst maskerede jeg min gruppe med uret, så det ser ud til at være bag planterne fra baggrundsbilledet. le punkter der brænder ud på trykte medier, samt jeg har tilføjet lidt ekstra farvemætning for at give lidt mere glød i billedet. Jeg har til sidst været inde og justere hvid balancen så farverne på de hvide låger er helt hvide (dog med et mørkt punkt så de ikke brænder ud). 8 3b 4 For at genskabe lyssætningen fra stockbilledet, på de indsatte elementer, har jeg benyttet mig af dette lille trick: Opret 2 lag, ét til højlys og ét til skygge. Laget til højlys fyldes herefter med 50% grå farve. Det næste, jeg gjorde, var at tilføje skygger og spejlninger. Skyggerne har jeg lavet ved manuelt at male med en blød sort brush, og derefter give laget en lav opacitet 5). 7 Genskinnet fra bordet er lavet ved at spejle bordet ned på gulvet, og herefter tilpasse perspektivet 6). Så har jeg fyldt det med en grå farve. Derefter har jeg lavet en maske på laget, som vha. en gradering toner ud, og så har jeg givet laget noget gaussian blur for at genskabe gulvets forvrængning af spejlningen. Herefter har jeg givet laget Linear Burn og en opacitet på 20% 7). Marker laget, der indeholder baggrundsbilledet, gå til Channels og CTRL+Klik på RGB kanalen. På denne måde udvælger vi højlyset i laget. Kopier det herefter. Vælg laget til højlys som er fyldt med 50% grå, og indsæt din udvælgelse fra RGB kanalen. Herefter sættes lagets Blending mode til Soft light. Gentag step 2, men inverter udvælgelsen, så vi i stedet får skyggerne. Disse indsættes på det tomme lag, vi har oprettet til skyggerne. Blending mode på dette sættes til Multiply 9 De 2 lag flyttes øverst i lag panelet, og opaciteten justeres. 5a 5b På denne måde kan man overføre lyssætning fra et baggrundsbillede til de indsatte elementer 9). Man kan også bruge metoden til at justere kontrasten. 6 Herefter har jeg været inde at farve justere på billedet, så der ikke er nog- SVENDEPORTFOLIO // BJØRN NYBORG 31

Kvalitetsvurdering Jeg modtog godt, højopløst materiale fra fotografen, så jeg havde et godt udgangspunkt. Jeg er tilfreds med resultatet, da det fik det ønskede moderne udtryk, samt jeg fik møblerne til at se naturlige ud i køkkenet. Jeg har vist resultatet til andre på kontoret, samt en grafiker ven, og de udtaler at billedet har fået et moderne, stilrent udtryk. SVENDEPORTFOLIO // BJØRN NYBORG 33

Guds Fred Grafisk produktionsforståelse Jeg skulle lave hjemmeside og logo for Guds Fred, som er et musikalsk projekt af Thomas Kallehave. SVENDEPORTFOLIO // BJØRN NYBORG 35

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å http://gudsfred.dk 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. SVENDEPORTFOLIO // BJØRN NYBORG 37

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: SVENDEPORTFOLIO // BJØRN NYBORG 39

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. SVENDEPORTFOLIO // BJØRN NYBORG 41

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. SVENDEPORTFOLIO // BJØRN NYBORG 43

2016 SVENDEPORTFOLIO // BJØRN NYBORG T: 53 72 90 81 me@bjornnyborg.com bjornnyborg.com