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