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