GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2

Transkript

1 GRAFISK WORKFLOW Kasper Staal - Portfolio - H2

2 Opgaven Denne opgave bestod i at design et website til min egen virksomed 3DService.dk. Websitet skulle være responsivt, og indeholde de mest gængse informationer om forretningen som leverer 3Dprint til virksomheder og private. Design Designet er optimeret efter målgruppen som primært er virksomheder eller privatpersoner som skal have fremstillet en prototype. Udtrykket er derfor stilrent og enkelt. Layout Layoutet er optimeret således at det virker på alle medier. Både skærm, tablet og mobil. For at få dette til at lykkes har jeg brugt media-breakpoints (Responsivt design). 80% af dine brugere kommer fra tablets/telefoner, så det er utrolig vigtigt at have et site der fungere på tablets/telefoner. Derudover bliver sitet også SEO-ranked højere hvis det er responsivt. Grafikoptimering For at optimere loadinghastigheden på siden er grafikken komprimeret i enten.jpg eller.png-filer og gemt ned i den mindst mulige størrelse. Jo mindre loadhastighed, jo bedre bliver SEOrankingen samt brugervenligheden. Procesbeskrivelse For at sikre et optimalt website har jeg gennemgået følgende steps: - Research og inspiration - Ideudvikling og skitser - Redegørelse for målgruppe - Billedmateriale optimering - Det visuelle udtryk visualiseres - Mockup i Photoshop - Skelet og flowchart - Udarbejdelse af site - Scripts implementeres - Breakpoints udarbejdes - Browsertjek - SEO-optimering - Sitet sættes online Scripts Siden er koden i HTML5, CSS3 og benytter også enkelte PHP-elementer. Der er implementeret et PHP-script for at få kontaktformularen til at fungere. Browsere Sitet er gennemtestet på følgende browsere: Mozilla Firefox, Safari, Google Chrome, Opera og Internet Explorer. SEO optimering Sitet er SEO-optimeret vha. Titletags, Meta-descriptions, samt alt-tekster til billederne, Derudover er grafikken optimeret, hvilket også giver en bedre ranking. Sitet er derudover registreret i Google Analytics. GOOGLE Analytics Sitet er registreret i GOOGLE Analytics så vi løbende kan følge med i sidens præstationer. Transistions Jeg har brugt transitions på menu elementerne, som giver en øget dynamik og liv til sitet. Skelet For at gøre processen nemmere ift. at opbygge sitet er der udarbejdet et skelet, som beskriver størrelser m.m.. Skelettet er opbygget hhv. i procenter, samt pixels. Flowchart Flowchartet er opbygget så det er fuldstændig klart hvilke sider der skal linke til hvad. Kvalitetsvurdering Det har været en stor opgave at kode sitet, men resultatet er endt ud med at blive rigtig godt, og ranker også rigtig højt på Google hvis man søger efter de keywords vi gerne vil rammes på. Jeg har fået skabt det udtryk jeg gerne ville, og websitet har allerede givet øget kundeaktivitet. Færdigt produkt Se det færdige produkt på

3 Kasper Staal - Portfolio - H2 Research og inspiration Inspiration Her bliver jeg inspireret af den blå farve i menuen, og de meget klare og rene farver i baggrunden. Derudover er jeg inspireret af layoutet som er sat op i kolonner. Inspiration Her er jeg inspireret af den gennemgående menu og de store og inspirerende billeder.

4 Idéudvikling og skitser Valg af skitse Jeg har valgt denne skitse da jeg føler jeg kan få det mest professionelle og informative layout uden at gå på kompromis med de designmæssige parametre. Siden skal sælge en professionel service, og der er derfor behov for at der er plads til meget information og knap så mange store billeder som man ser på mange websites nu om dage. Fravalgte skitser

5 Målgruppe, mockup, grafikoptimering m.m. Målgruppe Målgruppen er primært virksomheder eller privatpersoner som skal have fremstillet en prototype. Udtrykket er derfor stilrent og enkelt. Alder: år, mænd. Mockup Der er lavet en mockup i Photoshop, og derefter er elementerne sliced og optimeret. Grafikoptimering Alt grafik er optimeret til web. Enten.jpg eller.png-filer alt afhængig af om der behøves gennemsigtighed.

6 Flowchart og skelet Index Printservice Kunder 3DSelfie (Eksternt) Kontakt Flowchart Sitet indeholder tre undersider foruden Index-siden. Derudover indeholder siden et eksternt link som linker over til Skelet Når widthen overstiger 970px er skelettet opbygget i pixels. Derefter kører vi i procenter.

7 Udarbejdelse af site, CSS, scripts, breakpoints Sitet kodes Sitet udarbejdes i Dreamweaver Scripts Scripts indsættes så serveren kan håndtere kontaktformen Breakpoints Breakpoints udarbejdes så sitet fremstår responsivt CSS CSS kodes med CSS3 som gør det muligt med transitions, gradienter osv.

8 Browsertjek, SEO-optimering og Google Analytics Google Analytics Sitet er oprettet i Google analytics så vi kan følge sitets præstation SEO optimering Sitet er SEO-optimeret, så det ranker højere på GOOGLE. Der er optimeret efter Titletags, H1, H2, alt-tekster samt udarbejdet SEO-tekster, samt robots: Index, follow. Browsertjek Sitet er tjekket i følgende browsere: Google Chrome, IE, MOZ, Safari og Opera. Der er nogle enkelte ting som ændrer sig fra browser til browser, men dette udgør ikke et designmæssigt problem.

9 Publisering og endeligt produkt Publisering Sitet uploades vha. FileZilla som er klar det letteste og sikreste program at bruge til dette. Endeligt produkt Kan ses på Det endelige produkt kan ses på