Kasper Staal - Portfolio - H2 GRAFISK WORKFLOW Kasper Staal - Portfolio - H2 Opgaven Procesbeskrivelse GOOGLE Analytics Denne opgave bestod i at design et website til min egen virksomed 3DService.dk. For at sikre et optimalt website har jeg gennemgået følgende steps: Sitet er registreret i GOOGLE Analytics så vi løbende kan følge med i sidens præstationer. 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. - 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 Layout Scripts 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. 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. Grafikoptimering SEO optimering 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. 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. Websitet skulle være responsivt, og indeholde de mest gængse informationer om forretningen som leverer 3Dprint til virksomheder og private. Design 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. Browsere Kvalitetsvurdering Sitet er gennemtestet på følgende browsere: Mozilla Firefox, Safari, Google Chrome, Opera og Internet Explorer. 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å www.3dservice.dk 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. Kasper Staal - Portfolio - H2 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 Kasper Staal - Portfolio - H2 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: 23-50 å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. Kasper Staal - Portfolio - H2 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 www.3dselfie.dk Skelet Når widthen overstiger 970px er skelettet opbygget i pixels. Derefter kører vi i procenter. Kasper Staal - Portfolio - H2 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. Kasper Staal - Portfolio - H2 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. Kasper Staal - Portfolio - H2 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å www.3dservice.dk Det endelige produkt kan ses på WWW.3DSERVICE.DK
© Copyright 2024