GRAFISK DESIGN Min personlige e-portfolio
2 OPGAVEBESKRIVELSE Produkt: E-portfolio Farve: RGB Programmer: Brackets, Photoshop og Illustrator Min personlige e-portfolio er udarbejdet som et led i min uddannelse til mediegrafiker. OVERBLIK E-portfolioen er lavet til mit 2. hovedforløb hvoraf de fire kerneer samt dokumentation hertil fremtræder. Det er et website, som er baseret ud fra HTML5 og CSS. LAYOUT Jeg har designet min e-portfolio i Photoshop ved hjælp af et grid som jeg har udarbejdet på gridcalculator.dk. På den måde får man nogle linjer man kan gå ud fra. Jeg valgte fire kolonner med en bredde på 475px samt en margen bredde på 20 px. Portfolioen har en bredformat opsætning. I designet har jeg gjort brug af gestaltlovene lukkethed, lighed og nærhed. På den måde skaber man overblik for brugeren. De kan lettere overskue indholdet på ens side. Gestaltlovene sørger altså for at design og funktionalitet går hånd i hånd. DESIGNKRAV Til min e-portfolio ønskede jeg et enkelt og indbydende design. Dog ønskede jeg også at det skulle være farverigt. BROWSERKOMPATIBILITET Portfolioen er testet i Safari, Firefox og Google Chrome og fungerer som den skal. USABILITY Sitet er overskuelig for enhver bruger, da det er enkelt stillet op. Menuen befinder sig i toppen af portfolioen og det er derfor nemt at navigere rundt. I footeren finder man nogle af mine socialemedier hvor det er muligt at kontakte mig via. dem. SØGEOPTIMERING Jeg har brugt metatags samt alt tags for at gøre min e-portfolio søgeoptimeret. Derudover har jeg tilføjet den hos Google for at få deres robotter til at tjekke den. PDF LÆSER Da PDF er bliver læst forskelligt alt efter hvilken browser man benytter har jeg i mine koder gjort så brugeren bliver spurgt om de vil åbne PDF erne i en PDF læser vel at mærke hvis de benytter sig af Firefox eller Google Chrone da Safari desværre ikke understøtter den funktion endnu. På den måde sikre jeg mig at mine PDF er bliver vist korrekt. PROGRAMMET BRACKETS Brackets er en moderne teksteditor, hvor alt det overflødige er skåret fra. Brackets gør det nemt at designe i browseren og den hjælper med forskellige ting. Det skulle være nemt at navigere på portfolioen samt finde de forskellige ting. Det skulle også tydeligt fremgå hvilken hjemmeside man kommer ind på.
Udvalgte koder og betydning 3 UDVALGTE HTML KODER OG BETYDNING <div class= menu > <ul> <li><a href= #section1 >Velkommen</a></li> <li><a href= #section2 >Hovedforløb</a></li> </ul> </div> Denne kode definerer navigationen og de links den indeholder. <h1>mediegrafiker Portfolio 2016</h1> H1 tags før og efter teksten gør teksten til en h1 overskrift. <p>copyright 2016 Camilla Vind Waldeyer, All Rights Reserved</p> P tags før og efter teksten gør teksten til en brødtekst. <a href=./images/arne-jacobsen-dokumentation.pdf download></a> Denne kode linker til min PDF og sørger for at den bliver åbnet i en PDF læser. <img src= images/white-w-logo.png alt= W-logo /> Denne kode linker til mit logo. Samt sørger for at definere hvad der er på billedet hvis man tager musen over billedet. Alt tags har også en effekt i forhold til søgeoptimering. <link rel= icon type= image/png href= favicon.png > Denne kode linker til mit favicon. Et favicon også kaldet website icon er et lille logo/ikon man kan placere der hvor man taster hjemmesideadressen ind i browseren. UDVALGTE CSS STYLING OG BETYDNING * { margin:0px; padding:0px; } Denne styling sørger for at min margin og padding er på 0px hvis ikke andet er defineret. nav { width: 100%; height:143px; background-color: rgba(148, 31, 196, 0.3); background-image: url(../images/galaxy-billede-menu.jpg); position: fixed; background-repeat:no-repeat; background-size:cover; } Denne styling er lavet på min navigation. Stylingen sørger for at min navigation har en bestemt højde og bredde. Samt at min navigation har et baggrundsbillede med en svagere lilla farve ovenpå. Desuden sørger den for at min navigation bliver øverst oppe i browseren. nav.wrap.menu a:hover { color:#4a0970; } Denne styling gør at når man kører musen over teksten i navigationen ændre den farve fra hvid til lilla.
Flowchart, wireframe og storyboard 4 Logo Menu Tekst FORSIDE Tekst HOVEDFORLØB Grafik og billedbehandling Typografi og ombrydning Grafisk design Grafisk produktion og workflow Footer FLOWCHART WIREFRAME STORYBOARD
Udsnit af html og stylesheet 5 UDSNIT AF HTML DOKUMENT UDSNIT AF STYLESHEET
Ikoner og farver 6 IKONER I ILLUSTRATOR Jeg har udarbejdet ikonerne til min e-portfolio i Illustrator. Samt mit eget logo. GALAXY I PHOTOSHOP Jeg har udarbejdet galaxy billedet til min e-portfolio i Photoshop.
Typografi 7 Oswald Overlængde x-højde Underlængde Min personlige e-portfolio Oswald Bold AaBbCcDd 123456789 R: 255 G: 255 B: 255 R: 46 G: 16 B: 64 R: 255 G: 255 B: 255 Oswald Regular AaBbCcDd 123456789 Oswald Light Farvenuancer fra baggrundsbilledet jeg har benyttet mig af. { R: 112 G: 48 B: 194 R: 68 G: 112 B: 208 R: 109 G: 32 B: 161 R: 6 G: 40 B: 63 R: 30 G: 79 B: 146 R: 21 G: 43 B: 90 AaBbCcDd 123456789 FONT Jeg har brugt fonten Oswald, som er en Google font hvilket betyder at den er optimeret til internettet. Jeg har brugt den med forskellig garniture i form af bold og light. Jeg synes fonten passer godt til min e-portfolio med sine runde former og sin og sin høje x-højde. Hvis ikke den kan vises i brugerens browser har jeg kodet at de skal se en anden sans-serif font. FARVER Farverne jeg har benyttet mig af er kolde farver som ligger ved siden af hinanden i farvehjulet. Til teksten har jeg benyttet mig af farven hvid, hvilket gør at teksten skiller sig ud på den farverige baggrund