GRAFISK PRODUKTIONSFORSTÅELSE

Transkript

1 GRAFISK PRODUKTIONSFORSTÅELSE BRILLIANT BIKINIES WEBSITE MARÍ DYRMOSE

2 OPGAVEN OPGAVEBESKRIVELSE Brilliant Bikini kompagniet skulle have designet og programmeret en website, hvor de kunne præsentere deres produkter, og for eventruelle forhandlere kunne have mulighed for at kontakte dem. Sitet måtte gerne være responsive, så det kunne tilpasse sig til computer, ipad og mobilenheder. OPSTARTSFASE Det første jeg gjorde, var og tage en snak med kunden om de forskellige ting kunden ønskede sig og hvilke elementer der var vigtige i forhold til hjemmesiden. Jeg fortalte kunden, hvor meget jeg selv kan yde til opgaven angående kodning og design. Jeg kunne lave designet til hjemmesiden og gøre hjemmesiden responsiv. Men jeg har ikke kompetencen til at kunne kode en webshop og det kunne kunden få professionel til hjælp. GRUNDOPBYGNING Jeg startede med at skitse nogle layouts for, hvordan siden skulle se ud og derefter designede i photoshop med photoshop generator. Da siden er responsiv er det ikke helt oplagt med billeder i Photoshop Generator. Jeg brugte det kun til konstante elementer som fx logoe,r som jeg kan gå op i 2x. Dette gør det mulig at skifte farve undervejs. Angående kodning har jeg prøvet og kode så meget som muligt i Bootstrap CSS og min egen style sheet. Jeg har også brugt Javascripts, Jquwery og PHP til at få visse elementer til at fungere. DESIGNKRAV Sitet skal være indbydende og simpelt Sitet skal indeholde banner og billeder med bodyfitness piger samt farver som matcher. Sitet skal være brugervenlig - nem at navigere. Det skal være overskueligt og let informerende Det skal være nemt at finde de vigtige informationer NAVIGERING Sitet skal være enkelt, overskueligt og nemt at navigere rundt på. Korte sætninger, så det ikke bliver for tungt at læse. En funktionel Boooking knap størrelse og som er letlæselig. Nemt at finde rundt i menu/navbar. En simpel footer med en hop-til-top knap. WEBSITETS LAYOUT Sitet er responsive, så det tilpasser sig til computer, ipad -og mobileenheder. Responsive banner, tekst og billeder på alle sider. Menuen ændrer sig til en mobilmenu, når browservinduet er under 786 px bred. Slideshow på index sitet. Font Roboto via swebfonts, da den er let læselig. Drop Down Menu Customized Php sheet til kontakt CMS redigering og text placering i CushyCms KVALITETSVURDERING Jeg er blevet rigtig tilfreds med det færdige resultat, da sitet er blevet overskueligt og nemt at navigere rundt på. Designet er rent, attraktivt og har diverse elementer, som gør det til en meget girly hjemmeside som kunden krævede. Til kodning af websitet har der været nogle udfordringer blandt andet i forhold til mobilmenuen, som tog nogen tid at få til at virke. Jeg er ret vant til at arbejde i bootstrap men nogle gange udfordres man i faget. Denne gang var det angående videoer og placering af videoer på hjemmesiden. 33 ANVENDTE PROGRAMMER TEKNISKE DETALJER 9 SITES MED 11 UNDERSIDER = 20 SITES + INDEX FULD FUNKTIONALITET I ALLE BROWSERE RESPONSIVE: OPTIMERET TIL DESKTOP, TABLET OG MOBI. SAMARBEJDE MED: WWW. GECKOBOOKING. DK, BOOKING ARBEJDSPROCES Inspirationssøgning på nettet og via Brilliant Bi knies logo Håndtegnede skitser og skelet Layout i Photoshop og design i Photoshop Generator. Udarbejdelse af flowchart, skelet og storyboard. Programmering af sitet med brug af HTML5, CSS3 og jquery. Tilpasning til tablet og mobil (mål i %, media queries, viewport metatag) Søgeoptimering ved brug af meta tags (title, keywords, discription) Browserkompatibilitet testet Rettelser af koder, tekster og billeder. Sitet er godkendt og uploades på kundens domæne.

3 BRILLIANT BIKINIES 34

4 PROCES Brief fra kunde til projektleder Skitser og layout Tekst og billeder bliver sendt fra kunden Kreativ udarbejde af layout og design Korrektur og tilrettelse Hjemmesidens layout og design godkendes Layout bliver kodet til hjemmesiden Layout og design er godkendt Godkendelse fra kunden Sender det ud til målgruppen 35

5 PHOTOSHOP LAYOUT MED 960 Her ses et eksempel på photoshop 12 columns template layout af en af undersiderne. 960 grids template grid til photoshop er med til at opnå den bedste struktur og overblik over størrelser. Hvis du skal arbejde med responsive design, er det også et nyttig værktøj til at bestemme grids og størrelse forhold. Du kan downloade action filen via 960 egen hjemmesside 960.gs 36

6 FLOWCHART Index.html Om os Info Trunks Bikinies Udlejning Shop Sponsor Kontakt Booking FAQ Regler og råd Samples og Connectors Bikinifitness Bodyfitness Bikinifitness Womens Physique Bodyfitness Smykker Sko Andet 37

7 BOOTSTRAP Bootstrap er et framework, som du kan bruge til at bygge hjemmesider med. Med framework menes der, at alle CSS klasser, HTML markup og JavaScript scripts er lavet for dig, så du blot skal vælge, hvor og hvordan de skal implementeres på din hjemmeside. Bootstrap er mobil-first, hvilket betyder, at hvis du anvender Bootstrap til at lave din hjemmeside med, så får du en hjemmeside som er 100% optimeret til mobile-eneheder og tablets. RESPONSIVE For at lave websitet responsivt på forskellige breakpoints har jeg bl.a. brugt Media Queries og Viewport Meta Tag MEDIEA QUERIES Med media queries kan jeg selv styre, hvordan mit indhold skal opføre sig VIEWPORT META TAG Mobiler og tablets zoomer som regel ud, når et website vises således at hele websites bredde passer til skærmen. Derfor bruges viewport til at forhindre denne funktionalitet. 38

8 FILEZILLA FileZilla en gratis FTP klient, der tilbyder alle de funktioner, du skulle få brug for i forbindelse med overførsel af filer til dit webhotel. 39

9 SEO SEO OPTIMERING Der er blevet brugt h1, h2 og h3 tags, som beskriver hvad denne side handler om. Jeg har også tilføjet søgeoptimering ved at tilføje title, description og keywords i Meta "keywords" og "discription" 40

10 CUSHYCMS Da min kunde til sidst havde godkendt design og hjemmesiden, blev der diskuteret hvordan hun kan ændre i indhold fremover. Vi kom til en endelig beslutning, hvor vi oprettede en konto på CushyCms. Det er en en gratis CMS som er meget nemt og arbejde med. CushyCms tilbyder Tillad kunder at sikkert redigere indhold Ingen software at installere, ingen programmering kræves Det tager kun et par minutter til opsætning Definere nøjagtigt, hvilke dele af siden kan ændres Producerer standarder kompatibel, søgemaskine venlige indhold 41