GRAFISK PRODUKTION & WORKFLOW. Endotest website

Transkript

1 GRAFISK PRODUKTION & WORKFLOW Endotest website

2 DOKUMENTATION OPGAVEN: Endotest ApS ønskede at redesigne deres hjemmeside, så den fremstår mere professionel og enkel. Derudover skal det nye site præsentere firmaets produkter på en nem og overskuelig måde samtidig med, at firmaets kunder nemt kan finde information om produkterne. FARVER: Farverne på sitet er afstemt i samarbejde med kunden og repræsenterer farverne i firmaets logo. Derudover hjælper farverne til at give sitet et professionelt og enkelt udtryk. DESIGNKRAV: Sitet skal være indbydende og enkelt. Sitet skal være yderst brugervenligt. Sitet skal præsentere produkterne på en nem og overskuelig måde. Sitet skal være enkelt og moderne. ARBEJDSPROCES: Møde med Endotest ApS om de forskellige designkrav. Udarbejdelse af wireframe og flowchart. Udarbejdelse af mockup i Photoshop. Godkendelse af mockup, wireframe og flowchart af kunden. Programmering af sitet i Dreamweaver. Billedbehandling af produkter - weboptimering af billederne. Søgeoptimering ved brug af meta tags (Keywords). Test af browserkompatibilitet. Demo sendt til kunden og godkendt. Tilretninger af kode, css og tekster. (Kommentarer i HTML-koden) Kode testet for fejl gennem Dreamweaver - W3C validation. Sitet godkendt og uploadet på serveren. TYPOGRAFI/OMBRYDNING: Jeg har valgt at bruge en websikker font på hele sitet, for at sikre mig at typografien ikke ændrer sig. Fonten er sat med en * markør, så teksten er ens gennem hele sitet. Derudover har jeg valgt at ombryde teksten manuelt med <br /> og <p>-tags for at linjerne ikke bliver for tunge at læse på skærm. RGB 255, 153, 0 Hex #F90 RGB 214, 213, 214 Hex #DEDEDE BROWSERKAMPATIBILITET: Sitet er testet i Chrome, Firefox, Safari og Internet Explorer, hvor det fungerer optimalt. KVALITETSVURDERING: Jeg er yderst tilfreds med det færdige resultat, da sitet lever op til firmaets forventninger og ønsker. Sitet er enkelt og brugervenligt og indbyder kunden til at udforske de forskellige produkter. Der har ikke været de store udfordinger angående kodningen af hjemmesiden. Enkelte steder afviger målene fra sitets mockup, da jeg blev nødt til også at overveje de optiske forhold. F.eks. er enkelte div bokse rykket med margin for at skabe luft. Kunden er blevet meget tilfreds og ønsker udover hjemmesiden en mobil version, hvilket jeg vil arbejde videre med. BILLEDER: Produktbillederne er fritlagt i Photoshop for at opnå en ens baggrund. Derefter er de gemt til web i RGB gennem Photoshops save for web funktion. Gennem Photoshop kan jeg bestemme filformat samt filens quality for hurtigere loadede billeder. 2 GRAFISK PRODUKTION & WORKFLOW ENDOTEST WEBSITE

3 DOKUMENTATION FLOWCHART Indexsiden indeholder menu til undersiderne samt en skjult dropdown menu (under produkter) til produkternes undersider. INDEX PRODUKTER FIRMAPROFIL KONTAKT OS MERE INFORMATION NDT TRYKKELSESMÅLING ULTRALYD PHASED ARRAY HVIRVELSTRØM BONDTESTING VISUEL FLEKSIBLE STIVE MATERIALE ID HÅNDHOLDT XRF TRANSPORTABEL STATIONÆR 3 GRAFISK PRODUKTION & WORKFLOW ENDOTEST WEBSITE

4 DOKUMENTATION WIREFRAME Sitet er opbygget i 960 grid, hvor jeg har brugt 12 kolonner, da designet skulle være simpelt uden for mange elementer, og der var derfor ikke brug for flere. Jeg har valgt at bruge et 960 grid system, da det er en nem måde at skabe en ensartet struktur på sitet. MOCKUP FORSIDE Sitets mockup er lavet på baggrund af wireframet. Sitet er opbygget med en bredde på 960 px. 4 GRAFISK PRODUKTION & WORKFLOW ENDOTEST WEBSITE

5 DOKUMENTATION WIREFRAME UNDERSIDE Da sitets underside indeholder en anden struktur end sitets andre sider, har jeg valgt at lave et særskilt wireframe og mockup. 5 GRAFISK PRODUKTION & WORKFLOW ENDOTEST WEBSITE

6 DOKUMENTATION INDEX Menu opbygget med skjult dropdown menu. Slideshow med 3 billeder Action linker til produktside. Action på Olympuslogo.png linker til olympus-ims.com 6 GRAFISK PRODUKTION & WORKFLOW ENDOTEST WEBSITE

7 DOKUMENTATION PRODUKTUNDERSIDE Undersiden er markeret ved hjælp af class aktiv. Action Header linker til index.html. H1 markør. H2 markør tekst markeret med <p> tags. 7 GRAFISK PRODUKTION & WORKFLOW ENDOTEST WEBSITE

8 DOKUMENTATION UDDRAG AF UNDERSIDER Billeder er fritlagt og weboptimeret. Link til Olympus produktside. Åbner i ny fane Target _blank Link til sidens top. Olympus logo linker til olympus-ims.com 8 GRAFISK PRODUKTION & WORKFLOW ENDOTEST WEBSITE

9 DOKUMENTATION TABEL Liste opsat i tabel. Tabel er stylet gennem css, så hvert andet link er gråt. 9 GRAFISK PRODUKTION & WORKFLOW ENDOTEST WEBSITE

10 DOKUMENTATION META TAGS SØGEOPTIMERING: Jeg har lavet søgeoptimering på sitet ved at tilføje title og keywords i headeren. Derudover har jeg tilføjet alt=tekst på billeder og angivet H1. KOMMENTARER I KODEN: For at gøre HTML-koden og css en overskuelig, har jeg tilføjet kommentarer. Det gør det nemmere for en anden person at overtage sitet ved videre arbejde. Æ, Ø, Å OG SPECIALTEGN I KODEN: For at sikre mig at æ, ø, å og specialtegn vises korrekt, har jeg valgt at erstatte dem med med deres HTML-kode. På den måde vises de korrekt i alle browsere. 10 GRAFISK PRODUKTION & WORKFLOW ENDOTEST WEBSITE