grafisk workflow Frank winding

Transkript

1 grafisk workflow Frank winding

2

3 redegørelse Opgaven Byg & Bo stod foran årets byggeudstilling 2015, og min arbejdsgiver JUGEL&CO skulle stå for alt markedsføring, medieplanlægning og kommunikation. Mit ansvarsområde var at stå for både design og frontend-kodning af årets website og implementere det i CMS et Joomla. Deres oprindelige website var lavet i Joomla og derfor valgte vi at fortsætte ad den vej, så de ikke skulle behøvede oplæring i et nyt CMS. Kunden havde derudover ikke de store krav udover at den skulle være responsive, så designet var lagt helt og aldeles i mine hænder. Dog med forbehold for den anden grafiske designer der skulle sidde med den matchende brochure, som selvfølgelig skulle have samme udtryk, så der blev holdt en rød tråd gennem kommunikationen. Så, opgavebeskrivelsen lød på at jeg skulle designe en Joomla-template som skulle være Byg & Bo s nye informerende website. Programvalg Ideudvikling til layout og design foregik i hånden og Photoshop. Under selve udviklingen brugte jeg Brackets til programmering og FileZilla til upload af filer mens tilpasning af billeder og grafiske elementer blev lavet i Photoshop. Afsender Byg & Bo består af 7 byggefirmaer som hver især udstiller deres huse, så afsenderen er disse 7 byggefirmaer som udgør Byg & Bo Målgruppe Målgruppen er primært familier 30+ samt børnefamilier som er på udkig efter byggefirma til deres nybyggeri. Hensigten var derudover også at få så mange folk ud til byggeudstillingen i Sabro, hvad enten det var for at søge inspiration eller for at snakke med entreprenørerne, for dermed at udbygge kendskabet til de respektive firmaer/udstillere. Billeder Billederne på websitet er en kombination af stock-fotos fra Colourbox/iStock og billeder leveret fra Byg & Bo s 3D-leverandør som har tegnet husene i 3D. Billederne bliver selvfølgelig re-saved i Photoshop via Save for web and devices så de er optimeret til digitale medier. Stil og stemning Kundens hidtidige website stod efter min overbevisning ikke mål med de produkter/huse som byggefirmaerne udstillede hvert år. Jeg lagde derfor stor vægt på det visuelle på websitet som jeg ønskede skulle bære præg af de flotte 3D-billeder der blev leveret, evt. kombineret med nogle stock-fotos. Derudover valgte jeg i samråd med min kollega der skulle stå for den trykte del af opgaven med brochuren, at lave et nyt farvetema til udstillingen som endte med at blive en fed gul farve, som supplerede deres røde logo på en rigtig lækker måde. Kvalitetsvurdering Det var en sjov og spændende opgave og jeg synes jeg fik lavet et rigtig flot website i overensstemmelse med den øvrige grafiske linje vi fik lagt i deres kommunikation. Websitet gik rent ind hos kunden sammen med det øvrige kommunikationsmateriale så det var en god og positiv proces fra start til slut. Websitet blev optimeret til forskellige størrelser og enheder som tablets og smartphones og derudover testet i de mest gængse browsere som IE, Firefox, Safari og Chrome. Det passede mig desuden perfekt at kunden ønskede websitet lavet i Joomla da jeg har stor erfaring med lige netop dét CMS, og det gjorde mig mere komfortabel med opgaven.

4 arbejdsprocessen

5 inspiration Der er eksempelvis fundet inspiration i webdesigns med visuelle udtryk i form af store (full screen) billeder. Transparent menu ved first stop. Når man tilgår websitet står menuen på en transparent baggrund, mens der kommer en baggrundsfarve på ved scroll på sitet. Jeg valgte transparent menu for ikke at flytte mere fokus fra full screen billedet.

6 ideudvikling

7 ideudvikling

8 flowchart Byg & Bo Hvem er Byg & Bo Udstillere Inspiration Konkurrence Leverandører Find vej Benée Huse Boligtrends 2015 Aarhus Kommune Historien bag Eurodan Huse Tag banken med... AirTjek Bygma Kontakt FBA Huse Byggeprocessen... EXPAN Villa Geosyd HusCompagniet Vælg grund med... HTH Køkken KFS Boligbyg Intelligent nybyg... Nordea Rationel Lasse Larsen Havearkitektens tips... Strøjer Tegl Nordea Svane Køkken Velux 2 Plan Huset Ytong

9 elementer i designet Menuen/headeren går fra at være transparent fra toppen, til at være med farve når den bliver aktiveret ved scroll. På den måde vil den hele tiden være synlig for brugeren, og man vil derved nemt kunne navigere videre efter behov. Derudover har jeg lavet en udstiller-oversigt i footeren så brugeren ligeledes kan tilgå de forskellige udstillere når de rammer bunden af siden. Formålet med websitet er at fremhæve udstillerne så de får promoveret deres navn og vist deres huse frem, og derfor valgte jeg genvejen i footeren også. De store billeder er gennemgående på hele websitet, og fungerer som en appetitvækker for de besøgende. På den måde får brugeren et indtryk af hvad udstillerne kan tilbyde af både design og stil. Desuden klappede udstillerne/byggefirmaerne i hænderne over at de fik blæst deres hus op i den størrelse på websitet, da billederne selvfølgelig på den måde ville komme mere til sin ret.

10 elementer i designet På websitet har jeg, som tidligere omtalt, valgt at der på forsiden skulle være et full screen velkomst-billede. På mobilen har jeg dog nedprioriteret billedet og valgt at skjule det så brugeren går direkte til indholdet. Typisk vil man besøge bygogbo.dk fra mobilen for at finde oplysninger som adresse, åbningstider osv. og derfor vil det for mange være et irritationsmoment at der popper et full screen billede op og fylder hele den lille skærm, og at man skal til at lede efter indholdet. På forsiden af websitet har jeg lavet en oversigt over byggefirmaerne så brugeren har overblik over udstillerne samt deres huse. Disse er opstillet i 4 kolonner (25% bredde) som selvfølgelig bliver tilpasset alt efter enhedens skærmstørrelse så de eksempelvis ved brug af smartphone vil fremstå i 1 kolonne..wk-gallery.wk-gallery-wall.clearfix a { width: 25%!important;.wk-gallery.wk-gallery-wall.clearfix a { width: 100%!important;.wk-gallery.wk-gallery-wall.clearfix a { width: 50%!important;

11 responsive design Udsnit af min custom CSS til tilpasning af responsive layout Her fortæller jeg at følgende kode kun skal bruges på enheder med en skærmbredde på maksimalt 600 pixels. Sådan har jeg gjort med både tablet- og smartphone-størrelser for at tilpasse websitet, så det ser så indbydende og lækkert ud som muligt uanset hvilken størrelse enhed de besøgende kommer fra. /* iphone (Portrait) (max-width: 600px) { div#sp-logo { width: 80px!important; left: 17px; top: 20px;.sp-mobile-menu ul li.active > a span { color: #D3C32F!important; For at gøre websitet responsivt og fremstå lækkert på alle enheder krævede det noget målrettet kode i CSS en, da det skulle programmeres så givne elementer fremstod på en bestemt måde, alt efter hvilken størrelse enhed man besøger websitet fra. Se eksempler på dette til højre. /* ipad (Portrait) (min-width: 768px) and (max-width: 959px) { div#sp-logo { width: 100px!important; left: 17px; top: 20px;.header-fixed-top { background: #D3C32F!important;.sp-mobile-menu > ul { margin-left: 15px; padding-left: 15px; padding-top: 20px;

12 test og optimering Mobiloptimeringen sidder jeg ligeledes og tilpasser og koder direkte i Google Chromes smarte værktøj, hvor kan se et preview af alle de gængse mobile enheder. Meget af kodningen previewer jeg direkte i Google Chrome, hvor jeg kan skrive og redigere koden live i browseren og derefter kopiere koden over til min CSS-fil som jeg redigerer og tilføjer i direkte fra FTP-serveren.

13 Eksempler på SEO I teksten er der taget højde for at tags er placeret korrekt. Eksempelvis i form af H1-tags der kun figurerer én gang pr. side mens det er tilladt at bruge H2-tags, p-tags osv. flere gange på en side. Jeg har placeret ordet Byggeudstilling først i sidetitlen på forsiden for at give den bedste effekt ift. søgeoptimering. Herudover indgår Her har jeg lavet en speciel H1-class til forsideteksten, da jeg gerne ville have den i en anden pixelstørrelse end de øvrige H1-tags på websitet. Dette kunne løses ved at lave en særskilt H1-class. Sabro ved Aarhus, Østjylland som er dette års lokation samt Byg og Bo. Placering som nr. 1 på Google på søgeordet Byggeudstilling. (8/ ) Statistik fra lancering 6/3-15 t.o.m. 8/11-15.

14