PORTFOLIO SVENDEPRØVE

Transkript

1 EDDIE KÜSTER ABI-KHALIL PORTFOLIO SVENDEPRØVE

2 GRAFISK WORKFLOW Red en med blodkræft - Website 2

3 Produktet 3

4 OPGAVEN Denne opgave er en mindre fiktiv opgave, som ikke har fået sit sidste godkendelse endnu. Jeg skulle lave et website for blodbankerne, som en tilføjelse til de postkort som findes rundt i landet. Denne kampagne BE ONE OF THE GREAT blev lavet, for at skabe opmærksomhed omkring stamcelledonation. De ønskede et simpelt logo til toppen, hvor der stod: "Red en med blodkræft" i samme stil som display skriften. Siden skal primært bruges til web, men også gerne Mobil og Tablet. Modtagerne, som denne kampagne, er stadig rettet mod mænd i alderen år Mit udgangspunkt var, at bruge designet fra alle 3 postkort til websitet. Opgaven 4

5 PROCESSBESKRIVELSE FORVENTINGSAFSTEMNING MED KUNDE RESEARCH/ INSPIRATION IDÉUDVIKLING OG SKITSER DESIGN I PHOTOSHOP PRÆSENTATION AF DESIGN FOR KUNDEN 1. GODKENDELSE AF DESIGN KLARGØRE BILLEDER TIL WEB KODNING AF WEBSITE UPLOAD ENDELIG GODKENDELSE Processbeskrivelse 5

6 RESEARCH/ INSPIRATION INSPIRATION Jeg har ladet mig inspirere af andre hjemmesider. Jeg har lavet et udpluk af de sider, som jeg viste kunden, samt et moodboard over de forskellige websites, som kunne passe til stilen. 1. Jeg blev inspireret af de klart opdelte sektioner, som ville passe godt til responsivt design 2. Kontaktformularen er meget enkel, og er ikke til at tage fejl af DESKTOP MOBIL 3. Jeg var meget inspireret af de 2 første elementer, og måden deres navigation var bygget op på. Jeg kunne sagtens bruge opbygningen til min egen side MOODBOARD Jeg har lavet et lille moodboard, som jeg vil bruge til min præsentation af wesite design og skitser Research/ inspiration 6

7 PROCESSBESKRIVELSE SKITSER Inden jeg går i Photoshop for at designe selve sitet, hjælper det mig at skitsere. Dermed har jeg sitets grundopbygning på plads. Jeg tog udgangspunkt i min inspirationssøgning. Jeg lavede hurtigt en masse skitser, men prøvede også at ændre lidt i mine moduler, som jeg havde skitset. Processbeskrivelse 7

8 KOMPOSITION DESIGN I PHOTOSHOP Efter skitserne begyndte jeg at designe selve sitet i Photopshop. Dermed havde jeg noget mere visuelt at vise kunden, hvilket også gjorde at jeg havde et design at kode efter. Jeg designede fra mobil til desktop. Selve designet blev godkendt, men indholdet samt rækkefølgen blev ændret. GRID Sitet er opbygget som et responsivt one-page site opdelt i sektioner. Indholdet styres efter et 12-kolonners grid system, som jeg selv har regnet ud. Det betyder at indholdets størrelse bestemmes af, hvilke classes de er defineret med. Jeg har anvendt følgende Media Queries til mit grid, for at definere mine (min-width: 1024px) { /* For desktop: */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;} (min-width: 768px) { /* For tablets: */.col-t-1 {width: 8.33%;}.col-t-2 {width: 16.66%;}.col-t-3 {width: 25%;}.col-t-4 {width: 33.33%;}.col-t-5 {width: 41.66%;}.col-t-6 {width: 50%;}.col-t-7 {width: 58.33%;}.col-t-8 {width: 66.66%;}.col-t-9 {width: 75%;}.col-t-10 {width: 83.33%;}.col-t-11 {width: 91.66%;}.col-t-12 {width: 100%;} col-4 col-4 col-7 col-4 col-8 col-5 only screen and (min-width: 320px) { /* For mobile: */ [class*="col-"] { width: 100%;} col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 KOMPOSITION 8

9 SKELET.col-12.row 1 <header><h1>rubrik</h1> </header> 2.col-12.row <nav>nav ul{ display: flex;} </nav> body{../images/bg_1.jpg 4../images/bg_1.jpg../images/bg_1.jpg <section>.frontpage {height: 60vw;} </section>.col-12 <h2>underrubrik</h2> h2{ padding-top: 3%; margin-top: 3%; font-family: verdana, sans-serif; text-transform: uppercase;} 3 4.col-6.row 5 <article><h3>mellemrubrik?</h3> 6 <p>brødtekst</p></article>.img <img src="images/stemcell2.jpg" alt="hvad stamceller udvikler sig til"> col-6.col-t-12.youtube:first-child.row <div><iframe src=" com/embed/8aknt26ga0i" > </iframe> 8.bgwhite.row <section></section> 8 9.col-6.white 9 <article><h3>mellemrubrik?</h3> 10 <p>brødtekst</p></article>.bg1.row <section></section>.bg1{ background-color: rgb(230,38,78); background-color: #8ebea5; background-color: #ed9a00; col-8.col-4.galleri.img.overlay.modal <figure><img src="images/person1.jpg" data-id="modal1"></figure> FORMULAR MAPS skelet 9

10 BRUGERVENLIGHED OPBYGNING Websitet er opbygget som en Onepage, som giver et godt overblik for brugeren. Alt indhold er tydeligt opdelt i sektioner, så man ved hvad der hører til hvad. 1. Menuen kan hurtigt sende brugeren hen til den relevante sektion. Når man kommer ned på siden, bliver navigationen fixed, og det gør det nemt at navigere rundt på siden. 2. For at gøre det nemt for besøgende at komme i kontakt med blodbanken, har jeg opsat en enkel kontaktformular. Der er også mulighed for at melde sig som donor direkte ved at trykke på knappen "bloddonor.dk" 3. Godt med mellemrum mellem brødteksten, så det er letlæseligt 1 4. Mulighed for at tilgå google-map direkte under kontakt. Telefonnummeret er gjort "live", så man kan ringe med et klik - direkte fra sitet BRUGERVENLIGHED 10

11 AVANCERET KODE RANDOM SHUFFLE Scriptet finder et tal mellem 1 og 3. Dette sker ved at math.random() finder et tal mellem 0 (inklusivt) og 1 (eksklusivt) hvilket jeg derefter ganger med 3. Dette giver et tal mellem 0 (inklusivt) og 3 (eksklusivt). Dette tal runder jeg så ned med math.floor, hvilket giver mig et heltal, som er enten 0, 1 eller 2. Dette er dog for lavt, så jeg ligger 1 til for at det bliver 1, 2 eller 3. Hvis tallet er 1 så gør mit script intet, men hvis det er 2 loader det style2.css og hvis det er 3 loader det style3.css. style.css vil dog altid blive loaded da denne fil bruges til det basale layout og indeholder standard farveskemaet. Her kan man se hvordan scriptet fungere i praksis: 1. Forside billedet ved Desktop og Mobil 2. Baggrundsfarverne ved hver anden segment Markering af tekst, som også ændre sig Avanceret kode 11

12 KOMPATIBILITET // VALIDERING // CSS REGLER BROWSERTEST For at sikre, at sitet fungerer, gennemgik jeg det for fejl og mangler Jeg søgte på et af de mest brugervenlige scripts til forældet browsere. Den jeg fandt, så ud til at være et godt valg, da den hurtigt leder brugere videre til at downloade den nyeste version. 2. Jeg testede min side, i de mest anvendte browsere, for at sikre mig, at det hele så korrekt ud, og fungerede som det skulle. 3. Valideret igennem W3C's validator. CSS REGLER For at gøre det så nemt som muligt for mig selv, lavede jeg en kort beskrivelse med de mere generelle CSS og CSS3 regler. H1 tag h1 { font-size: 3rem; } (Rubrik) H2 TAG h2 { font-size: 2.5rem; }(Underrubrik) 2 3 H3 TAG h3 { font-size: 1.5rem }(Mellemrubrik) P tag: Lorem dolorem rem occum faccae et qui sit, comni acernam et hit qui sit et quis nus en-danimus rem que pratur? Et harit quis explist inisti optae porro te la cus p { font-size: 1rem; } KOMPATIBILITET // Validering // Css Regler 12

13 KVALITETSVURDERING Jeg lærte meget ved at lave denne opgave. Der var meget kundekontakt, samt en stor kreativ proces. Jeg fik frie hænder til at lave et website, ude for Region Midt design linje, da designet skulle passe med de postkort, der blev produceret noget tid før. Både kunden og jeg er glade for resultatet af hjemmesiden. Jeg synes, at jeg har fået skabt et enkelt, brugervenligt og informativt website, som samtidig fanger folks interesse. Jeg har forsøgt at opbygge sitets kode på en nem og overskuelig måde samt at anvende HTML5. Jeg har brugt en font som brødtekst, som alle maskiner burde have, samt scripts for at holde hjemmesiden spændende, ved at ændre farvetemaet, for hver "refresh" man laver Skulle jeg lave sitet i dag, ville jeg dog anvende Wordpress, så kunden selv vil kunne ændre teksten i fremtiden. Se det færdige produkt LIVE på: Kvalitetsvurdering 13