GRAFISK PRODUKTION OG WORKFLOW Hjemmeside til Team Brügger DITTE MADSEN - SVENDEPRØVE - 2015
KUNDEPROFIL Team Brügger er en frisørsalon i Aars. Indehaveren Gitte Brügger startede salonen op sammen med en partner i 2009, men har siden købt partneren ud. Medarbejderstaben består af fire ansatte, hvoraf den ene er elev. MÅLGRUPPE Team Brüggers målgruppe er hovedsageligt mænd og kvinder i alle aldre bosiddende i Aars. BRUGERVENLIGHED Som tidligere beskrevet er hjemmesiden overskuelig, enkel og nem at navigere rundt på. Der er ikke tilført utallige elementer, features m.m., kun de mest relevante ting. ARBEJDSPROCES Møde med kunden Inspirationssøgning på nettet Håndtegnede skitser Layout-forslag i Photoshop præsenteres for kunden Flowchart udarbejdes i samarbejde med kunden Wireframe og storyboard Programmering af sitet med brug af HTML5, CSS3 og jquery (Bootstrap) Tjekke visningen på mobile enheder evt. ændringer Søgeoptimering Tjekke sitet i forskellige browsere Demo uploades til kunden OPGAVEN Der udarbejdes en hjemmeside for frisørsalonen Team Brügger. Hjemmesiden skal først og fremmest informere nuværende og potentielle kunder om salonens ydelser, dernæst skal kontaktinformationerne fremgå tydeligt på sitet. Det skal være muligt at booke en tid via et link til en bookingside. Jeg har valgt at afbilde personalet, da det giver kunderne en form for tryghed. Designet skal være brugervenligt og overskueligt, så både yngre og ældre kan navigere på hjemmesiden. Sitet skal være responsive, så grafikken tilpasses mobile enheder. DESIGNKRAV Websitet skal have en enkel struktur og opbygning Antallet af farver skal være minimal, muligvis kun én signaturfarve Brugervenlighed det skal være nemt at navigere uanset teknisk flair Kontaktinformationerne skal være nemt tilgængelig Det skal være let at booke tid (foregår på en ekstern bookingside) Fremhævelse af salonens Facebookside, Instagramprofil og YouTube-kanal TJEK AF SITE OG BROWSERE Websitet er testet i Firefox, Safari, Internet Explorer og Chrome, hvor det fungerer, som det skal. Derudover har jeg været inde og teste sitets effektivitet på nettet ved hjælp af Page Speed. Denne side gjorde mig opmærksom på følgende: Hvis bootstrap.css og style.css komprimeres, kan jeg forbedre hjemmesidens hastighed, idet jeg sparer knap 128 kb KVALITETSVURDERING Hjemmesiden fungerer efter hensigten brugerfladen er overskuelig, og kundens ønske om et responsivt design er efterkommet. Gitte Brügger er ovenud tilfreds med resultatet. Jeg har foretaget basic seo og gjort kunden opmærksom på, at siden skal optimeres med jævne mellemrum. LAYOUT De respektive sider tilgås via menulinjen Baggrundsbilledet med en hårknude skaber en rød tråd, da det også skal anvendes på salonens tidsbestillingskort samt i annoncering Menuen ændrer sig til en mobilmenu, når browservinduet er under 768 px bred, hvilket giver en bedre overskuelighed på en lille skærm 2 GRAFISK PRODUKTION OG WORKFLOW
PROCESBESKRIVELSE Møde med kunden Inspirationssøgning på nettet Håndtegnede skitser Flowchart Layoutet præsenteres og godkendes af kunden Layout-forslag i Photoshop Wireframe Programmering med HTML5, CSS og Bootstrap Tjekke visningen på mobile enheder (evt. ændringer) Demo uploadet Browser kompatibilitet test Søgeoptimering med meta tags GRAFISK PRODUKTION OG WORKFLOW 3
INSPIRATIONSSØGNING 4 GRAFISK PRODUKTION OG WORKFLOW
SKITSER Jeg vil arbejde videre med de to markerede skitser. Ved at bruge en helt enkel forside skaber jeg med det samme det enkle udtryk, som kunden efterspørger. Menuen placeres det samme sted på undersiderne for at skabe en ensartethed. GRAFISK PRODUKTION OG WORKFLOW 5
SITEMAP Hjemmesiden består af en index side og seks underliggende sider, hvoraf én af dem er lavet som en dropdown. Derudover er der fra alle underliggende sider adgang til tre eksterne sider: Facebook, Instagram og YouTube. index.html (eksterne links) om.html priser.html booking.html kontakt.html damer.html herrer.html born.html Facebook Instagram YouTube 6 GRAFISK PRODUKTION OG WORKFLOW
FARVER TYPOGRAFI Den gule signaturfarve kombineret med den neutrale grå er valgt ud fra ønsket om en overskuelig hjemmeside med et let udtryk og et minimum af farver. En stil, som går igen i salonens indretning. På den måde er der en rød tråd mellem salonens rene linjer og websitet. Afprøvede typografier Raleway Frutiger Sort Tahoma Helvetica 100% 75% 50% 25% Valgt typografi: Raleway, som er en Google-systemfont, er brugt til teksten. Grå Raleway Regular 100% 75% 50% 25% A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0?! ( ),. & @ % Gul Raleway SemiBold A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0?! ( ),. & @ % 100% 75% 50% 25% GRAFISK PRODUKTION OG WORKFLOW 7
LAYOUT I PHOTOSHOP Sitet er bygget op i 960 grid, hvor der er brugt 12 kolonner. Jeg har brugt 960 grid for at bygge siden op på en nemmere måde og for at skabe en helt ens struktur på sitet. Dette framework er ikke optimalt at bruge, når man laver et responsivt design, da der arbejdes i procenter og ikke i pixelmål. Derfor afviger layoutet i Photoshop i forhold til det færdige website. Men opbygningen i 960 grid er velegnet, når man laver en kundekorrektur. 8 GRAFISK PRODUKTION OG WORKFLOW
LAYOUT I PHOTOSHOP TABLET OG MOBIL GRAFISK PRODUKTION OG WORKFLOW 9
WIREFRAME SKÆRMVISNING For at visualisere struktur og indhold på hjemmesiden har jeg lavet et wireframe. Content Navigation Logo Header Header Mail to Footer 10 GRAFISK PRODUKTION OG WORKFLOW
WIREFRAME TABLET OG MOBIL Content Header Header Header Header Mail to GRAFISK PRODUKTION OG WORKFLOW 11
STORYBOARD Actions 2 3 4 5 1 Linker til index.html 1 2 3 Linker til om.html Dropdown menu Linker til: dame.html herre.html born.html 4 Ekstern link til booking-side 5 Linker til kontakt.html 6 7 Eksterne links til sociale medier Linker til: Facebook Instagram YouTube Mail to: info@teambrugger.dk 7 6 12 GRAFISK PRODUKTION OG WORKFLOW
HTML CSS Sitet er bygget op ved hjælp af Bootstrap, hvor jeg efterfølgende har lavet en style.css til at overskrive de elementer i bootstrap.css, som jeg ikke ønsker at bruge. Bootstrap er ideel, når en hjemmeside skal være responsive. Eksempel på brugen af kommentarer i CSS en Efter færdiggørelsen af frontend-delen af siden, skal alle dokumenter videregives, så der kan blive udviklet CMS. Der er derfor skrevet kommentarer i koden for at lette processen og for at være sikker på, at der ikke opstår misforståelser. Eksempel på brugen af kommentarer i HTML-koden GRAFISK PRODUKTION OG WORKFLOW 13
SØGEOPTIMERING Jeg har på hjemmesiden lavet søgeoptimering ved at tilføje title og description i headeren på alle siderne. COOKIE MODUL Rent lovgivningsmæssigt skal man informere de besøgende om brugen af cookies. Det er tanken, at der skal implementeres et cookie modul i takt med, at kunden opretter en Google Analytics konto til registrering af trafik, herunder brugernes adfærd. SOCIAL MEDIA Links til sociale medier er placeret i footeren og fremhævet med den gule signaturfarve. Sociale medier kan bruges af Team Brügger til at øge kundepotentialet. Udover konkurrencer, tilbud, storytelling og lignende skal Facebooksiden også fungere som en slags portal til hjemmesiden og omvendt. Instagram er perfekt til deling af billeder inspiration, forvandling af kunder m.m. YouTube er en videokanal, hvor Team Brügger kan uploade inspirationsfilm og tutorials. 14 GRAFISK PRODUKTION OG WORKFLOW
FÆRDIG HJEMMESIDE WWW.TEAMBRUGGER.DITTEMADSEN.DK GRAFISK PRODUKTION OG WORKFLOW 15