GRAFISK DESIGN
OPGAVEN Min kæreste er medstifter af en vinloge. Medlemmerne af logen kunne godt tænke sig et sted, hvor de bl.a. kunne få et overblik over, hvilke vine de har bedømt og hvornår næste loge finder sted. Det var vigtigt for mig at lave en overskuelig hjemmeside, som var let at navigere rundt på. Derudover var det vigtigt, at hjemmesiden var responsiv, da jeg har en forventning om, at de fleste vil bruge deres smartphone til at tjekke hjemmesiden, da det er hurtigt og man altid lige har sin smartphone ved hånden. PROGRAMVALG Jeg har brugt Illustrator til at lave logo og ikoner. Jeg har brugt Photoshop til at farvejustere og beskære billederne af medlemmerne. Jeg har brugt Brackets til at kode hjemmesiden. GRAFISK DESIGN 4
1 2 3 4 INSPIRATION Jeg har fundet min inspiration forskellige steder på internettet. 1. Hover på et billede, hvor der kommer en gennemsigtig mørk boks henover billedet med en tekst på. 2. Ikoner til at illustrere hvad menupunktet handler om og en tilhørende tekst. 3. Stort billede i toppen med en tekst på som giver en ide om, hvad siden handler om. 4. Bedømmelse af vin ved hjælp af en linje med varierende længde i stil med stjernerne på Trustpilots hjemmeside, bare med en farve i stedet for stjerner. GRAFISK DESIGN 5
LOGO Jeg startede med at skitsere forskellige forslag til logoet på papir. Herefter udvalgte jeg et par stykker, som jeg tegnede i Illustrator. Jeg prøvede at inkorporere en vinflaske eller et vinglas i logoet, for at gøre det lidt anderledes. Selve logonavnet Nossi siger heller ikke meget om, hvad det handler om, så en illustration af en vinflaske eller et vinglas kunne være med til at underbygge budskabet. NOSSI På deres skjorter har de fået broderet logenavnet, og ud fra den skrifttype der er blevet brugt, har jeg fået inspiration til, hvilken skrifttype jeg ville bruge i det endelige logo. I det endelige logo har jeg valgt en smal antikva font. Fonten er dog en smule smallere end på skjorten, og det har jeg valgt for at få et mere elegant udtryk. Hjørnerne er afrundet i modsætning til skitsen, for at give det et mere blødt udtryk og for at give en kontrast til den mere kantede font. Fonten, der er brugt på skjorten, er en smal antikva font. GRAFISK DESIGN 6
LAYOUT Logen har skjorter i en vinrød farve, så jeg vidste, at jeg på en eller anden måde skulle bruge den farve i designet. I starten var jeg bange for, at farven ville blive for dominerende, så jeg brugte kun farven til menupunkter og ikoner. Det synes jeg dog blev for kedeligt i sit udtryk, så i stedet prøvede jeg at lave menubjælken i den vinrøde farve, hvilket jeg egentlig syntes fungerede godt. Jeg synes dog stadig, at udtrykket var fladt. Derfor valgte jeg til sidst at lave baggrunden i den vinrøde farve og indramme alle elementer i en hvid kasse. På den måde syntes jeg, at der blev skabt dybte og en rigtig god kontrast. Jeg vidste fra starten af, at jeg ville bruge et stort billede på forsiden som blikfang. Jeg afprøvede et par stykker, før jeg besluttede mig for dette billede, da det har en god stemning og rummer budskabet om, at dette er en hjemmeside, der handler om vin. Den mørke farve i billedet skaber en hyggestemning i samspil med den vinrøde farve. Min første ide med hjemmesiden var, at det skulle være en onepage, hvor alle sider er samlet på én side og man bare skal scrolle ned for at komme til næste side. Jeg blev dog hurtig enig med mig selv om, at det var vigtigt, at hjemmesiden blev overskuelig, så det var let for medlemmerne at finde de informationer, de skulle bruge. Derfor gik jeg tilbage til en almindelig opbygning. GRAFISK DESIGN 7
C=0 M=100 Y=0 K=90 C=20 M=100 Y=0 K=65 C=38 M=100 Y=58 K=62 FARVER Logen har skjorter i en vinrød farve med sort broderet logenavn på kraven. Jeg vidste derfor fra starten, at den vinrøde farve skulle inkorporeres på en eller anden måde. Jeg har afprøvet forskellige vinrøde farver for at nå frem til den helt rigtige farve. Den primære farve på hjemmesiden er den vinrøde farve, mens de sekundære farver er sort, hvid og grå. Sort er brugt til almindelig tekst - overskrifter, brødtekst og ikontekst. PRIMÆR FARVE Min første tanke omkring den vinrøde farve var, at det skulle være en meget mørk rød. Jeg synes dog at denne blev for mørk, og man kan næsten blive i tvivl om, om det er en sort. Jeg hev derefter noget sort ud af farven og puttede noget cyan i. Jeg syntes, at farven blev en god vindruefarve, men den blev for feminin, da den havde en for lilla nuance. Jeg endte med denne farve, da det var en god blanding mellem de to andre. Jeg synes, den har den rigtige vinrøde bordeaux farve, som er den farve jeg associerer med rødvin. Derudover ligger den sig meget op af farven på skjorten. Hvid er brugt de steder hvor teksten er placeret på en mørk baggrund, eksempelvis i menubjælken og når man hover over billederne af medlemmerne. Grå er brugt til menuen for at indikere hvilken side, man er inde på. Den er ligeledes brugt som hovereffekt til datoerne under vin. C=38 M=100 Y=58 K=62 R= 78 G=13 B=37 HEX #4e0d25 R=0 G=0 B=0 R=255 G=255 B=255 R=231 G=231 B=231 Når farver vises på skærmen, vises de i RGB. Jeg har derfor været inde og finde RGB værdierne i Photoshop. Når man i sin kode skal definere en farve kan man både gøre det med RGB, men man kan også gøre det med en HEX farvekode. Det er en HEX farvekode jeg har brugt til at definere farven på hjemmesiden. SEKUNDÆ- RE FARVER HEX #000000 HEX #ffffff HEX #e7e7e7 GRAFISK DESIGN 8
TYPOGRAFI Jeg har valgt en grotesk font som hedder Open Sans Condensed. Open Sans er designet til at gøre læsningen til en behagelig oplevelse med dens åbne former og moderne, rene og seriøse udtryk. Skriften har en tilpas stor x-højde og en moderat kontrast mellem hår- og grundstreger, der sammen med den simple konstruktion af hvert bogstav gør, at den er læsevenlig. Grundstreg Grundlinje Hårstreg Hpkx Overlængde X-højde Underlængde Da det er en condensed udgave af fonten bliver læsevenligheden en smule mindre, da bogstaverne kommer til at syne mere sammenklemte. På hjemmesiden er der dog ikke meget store tekstmængder, så jeg vurderede, at fonten godt ville kunne fungere til formålet. Ligesom i logoet giver de smalle bogstaver et mere elegant og eksklusivt udtryk, som jeg synes passer godt til logen. Jeg havde et par fonte oppe at vende før jeg til sidst besluttede mig for Open Sans Condensed. Majuskel Open Sans Condensed - Bold Open Sans Condensed - light Open Sans Condensed - light italic Minuskler Jeg har brugt Google fonts, da jeg synes det er en let måde at bruge spændende skrifttyper på hjemmesider. Det eneste man skal gøre er at linke til fonten i sin <head> del og i sin CSS skrive den rigtige font-family. To enkle steps. Fonten findes i 3 skriftsnit - light, bold og lightitalic. Det er dog kun light og bold jeg har brugt på hjemmesiden. Jeg har brugt light til brødtekst og bold til overskrifter. Udover Open Sans Condensed har jeg på forsiden brugt en font der hedder Dancing Script. Fonten er en stor kontrast til Open Sans Condensed, hvilket bryder det enkle og stilrene udtryk der ellers er. Fonten er en håndskrift, hvilket giver det lidt personlighed og en god stemning som byder læseren velkommen. Skrifttyper som ikke blev valgt: På Google fonts søgte jeg efter en font som ville passe til Nossi hjemmesiden. Jeg indstillede søgekriterierne til en forholdsvis slank sans serif font og fandt et par fonte som fangede min interesse. Lato: Jeg kunne rigtig godt lide denne font, men syntes at den blev for bred, da jeg var på udkig efter det mere smalle og eksklusive udtryk. Exo: Denne font skilte sig lidt ud pga. dens lidt mere kantede og mere detaljerede bogstaver. Jeg kunne godt lide det mere maskuline udtryk, men syntes også at den blev blev for bred. GRAFISK DESIGN 9
TEST AF HJEMMESIDE For at sikre, at hjemmesiden virker i de mest benyttede browsere har jeg testet hjemmesiden i Safari, Google Chrome og Firefox. I Firefox opstod der et problem med ikonerne på forsiden, idet de blev meget små. Jeg var derfor inde og inspicere koden for at finde frem til fejlen, som jeg fik rettet op på. Problemet var, at jeg havde sat en float left på ikon_box, og da jeg fjernede det, virkede de som de skulle. Google Chrome Derudover har jeg testet hjemmesiden på forskellige enheder for at sikre at den responsive del virkede. Jeg har testet på: Firefox imac MacBook Pro Bærbar PC Tablet Samsung smartphone iphone Safari GRAFISK DESIGN 10
KVALITETSVURDERING Jeg er super tilfreds med det endelige resultat! Det har taget lang tid at komme hertil, og der er opstået problemer undervejs, som jeg heldigvis har fået løst. Det er meningen at et af logemedlemmerne får ansvaret for, at opdatere hjemmesiden og det kan godt blive en svær opgave når hjemmesiden består af ren kode. Det vil derfor betyde, at logemedlemmet skal sættes ind i, hvordan man går ind i koden og lægger et nyt billede samt nye tekster op til nye vinbedømmelser. Det optimale ville derfor være, at overføre hjemmesiden til et CMS system, eksempelvis Wordpress. Med et CMS system behøver man ikke at have programmeringserfaring, da det er bygget op af en masse elementer man kan klikke på for at ændre indholdet på hjemmesiden. Det ligner derfor mere noget de kender og lettere kan sætte sig ind i og forholde sig til. Det er derfor planen at få hjemmesiden over i et CMS system. Grunden til at jeg har valgt at kode hjemmesiden i Brackets er, at jeg i sin tid spurgte, om det var i orden at lave en hjemmeside i et CMS system, men svaret var ret tøvende. Hvis man valgte at anvende et CMS system, skulle man gå ind og ændre i koden, for at vise at man godt kan anvende HTML og CSS. Jeg valgte derfor det sikre valg at kode hele hjemmesiden fra bunden. Hjemmesiden i kode Uoverskueligt for en person uden nogen form for kodningserfaring. Hjemmeside i wordpress Overordnet set er hjemmesiden overskuelig, let at navigere sig rundt på og der er de informationer som de ønskede. Flere af medlemmerne har henvendt sig til mig og udtrykt deres begejstring. De har også spurgt mig om, hvordan de får deres eget domæne så hjemmesiden for alvor bliver deres. Overskueligt med menupunkter. GRAFISK DESIGN 11