04
GRAFISK PRODUKTION & WORKFLOW
DESIGN OG KODNING AF WEBSITE TIL FRISØR CAMPOLINS
Opgaven gik ud på at designe og kode en frisør-hjemmeside i sort / hvid Art Deco stil. Dét firma, jeg har været elev hos, udvikler hjemmesider i Joomla som er et open-source system. Det er brugervenligt og giver kunden mulighed for selv at rette i sin hjemmeside efterfølgende. Joomla bygger på templates, men firmaets webudvikler har designet en in-house template, som er strippet for al styling, men er bygget op af standardmål, grids og moduler.
PROGRAMMER: Joomla CMS
29
BAGGRUND & MÅLGRUPPE Udvikling af website til en frisør, der havde fået ny identitet i forbindelse med ejerskifte. Målet var at designe en moderne og anderledes frisør-hjemmeside, der både skulle tiltrække de faste, ældre kunder men også få de unge ned til salonen. Kunden havde overtaget salonen efter sin mor, og han havde nogle helt klare ønsker til designstilen. Salonen var ved at blive renoveret og i forbindelse med åbningen af denne, skulle hjemmesiden være klar, så jeg havde ca. 14 dage fra udvikling til siden var godkendt og online.
TEKNISKE OVERVEJELSER Kunden ville på sigt gerne have en funktion på siden, hvor kunderne kunne bestille tid uden at skulle ringe ned til salonen. Med sin unge alder havde han selv erfaring med, at unge hellere vil trykke på en knap på hjemmesiden, end de vil ringe og bestille tid. Jeg skulle i designet tage højde for, at en sådan programmering skulle på senere hen. Kunden ville også gerne have en bestillingsfunktion på siden, uden at det skulle fungere som en webshop. Denne funktion skulle være synlig på designet ved åbning af salonen men ikke aktiv før senere. Et responsivt design er et tilkøb i dét firma, hvor jeg var elev, og denne kunde havde ikke valgt at købe det med i første omgang. For at designet fungerer pænt på diverse browsere og tablets / smartphones, skulle jeg tilpasse det i html-kode. Ønsker kunden alligevel responsivt, bliver siden sendt til programmering et andet sted i firmaet.
30
GRAFISK PRODUKTION & WORKFLOW
01
02 BRIEF FRA KUNDEN
04
03 BRUGERSCENARIER
05 GRAFISK BRUGERFLADE
07
06 GRID
08 KVALITETSTJEK
NAVIGATION
AFSEND DESIGNFORSLAG
KODNING AF DESIGNFORSLAG
31
01 BRIEF FRA KUNDEN Kunden leverede målgruppedefinitioner, tekst til det meste af indholdet på siden, logo, farver, en række ønsker til sidens funktionalitet, en liste med menupunkter samt ønsker til stil. Vi spørger altid kunden, om der er nogle andre hjemmesider de kan lide, så vi kan pejle os ind på, hvad de kan lide. I dette tilfælde var det en hel stilperiode jeg skulle tage udgangspunkt i; Art Deco, hipster, moderne og sort / hvid var nogle af nøgleordene.
02 BRUGERSCENARIER For at finde en struktur for sitet, der opfyldte målene, skulle jeg overveje en række brugerscenarier ud fra spørgsmål såsom: Hvem skal siden henvende sig til, hvad leder de efter til at starte med, hvad har de brug for at få at vide på forsiden, hvordan kommer de til den ønskede information uden for mange klik og omveje.
03 NAVIGATION Da der er forskellige brugere til siden, valgte jeg at opbygge designet med flere indgange, der underbyggede både faktuel og eksplorativ informationssøgning. Ud over menupunkterne i toppen, designede jeg derfor nogle alternative og iøjnefaldende indgange på forsiden, dels for brugervenlighedens skyld og dels for at gøre forsiden mere spændende og dynamisk idet indholdet / informationen kan skiftes løbende.
32
GRAFISK PRODUKTION & WORKFLOW
04 GRAFISK BRUGERFLADE Jeg overvejede hvilke grafiske midler, der kunne anvendes for at understøtte brugerens vej rundt på sitet. En væsentlig del af opgaven er, at brugeren ikke må lede forgæves, så jeg skulle finde enkle visuelle greb, der gjorde sidens funktioner genkendelige. Jeg har bl.a. anvendt logoets rektangulære og skæv-kantede form de steder på siden, hvor der er information til brugeren, fx menuen, telefon i toppen, de alternative indgange osv. Et roligt slideshow på forsiden giver mulighed for at promovere bestemte emner / nyheder. Da sidens farvepalette udelukkende er sort, hvid og grå, har det været en udfordring at gøre brugeren opmærksom på links eller mere information uden brug af signal-farve. Kunden ville gerne bruge logo-fonten på siden, ( Broadway ) men den understøttes ikke af alle browsere og i en brødtekst-størrelse er den ulæselig, så jeg har anvendt den til overskrifter og blikfang, og har ellers anvendt Google Fonten, Oswald, på resten af siden.
05 GRID Et standard grid er 960 pixel, men kunden ville gerne have en lidt bredere side, så dette design er bygget på et 1116 px grid. Firmaets egen webudvikler har designet den anvendte template så hvis jeg vil designe en bred side, skal jeg blot slå udkommenteringen på standard-reglen fra i stylesheet’et. Udfordringen ved at anvende det brede grid, er at det kræver ekstra kodning til tilpasning på fx tablets og smartphones.
33
06 KODNING AF DESIGNFORSLAG Firmaets webudvikler har som nævnt kodet en standard template, som vi anvender til alle nye website-design. Den er strippet for al styling så det er kun standard modulopbygning vi som designere starter med. Her skal vi så sætte logo, farver, tekst, billeder m.m. ind, men vi kan altid selv bestemme mål, placering, grid og mere, så vi får forskellige design ud af templaten. Jeg viser her et udsnit af html-koderne, så man kan se, hvordan designet er bygget op. Jeg kan ændre mange moduler og elementer på siden ved at benytte fx en <div class> eller en <div style> og oprette den ønskede style i det dertilhørende css stylesheet. Mange elementer på designet er kodet og implementeret på templaten af webudvikleren eller er plug-ins købt af firmaet. Men jeg kan stadig gå ind i koden og ændre udseendet af det pågældende element.
07 KVALITETSTJEK Det sidste jeg gør, inden forslaget bliver sendt til kunden, er at kvalitetssikre siden. Det gør jeg ved at gennemgå siden for evt. døde links, og sikre mig at alle funktioner og effekter virker. Jeg tjekker også siden i vores IE-tester program, som kan vise designet i ældre versioner af IE. Jeg sikrer mig at siden fungerer i andre browsere og at den står pænt på både tablet og smartphone.
34
GRAFISK PRODUKTION & WORKFLOW
08 AFSEND DESIGNFORSLAG Firmaet går meget op i, at designeren er i tæt dialog med kunden fra opstart til afslutning, så kunden har én fast kontaktperson om muligt. Derfor er det også mit ansvar at følge designet helt til dørs, så efter kvalitetstjek og gennemtjek fra en leder, skriver jeg en præsentation til kunden og vedhæfter et link til hjemmesiden. Det er en meget udførlig præsentationsmail og den er skræddersyet til hvert enkelt design så kunden får en professionel oplevelse.
Normalt vender kunden tilbage med rettelser til designforslaget inden for et par dage, ellers ringer jeg kunden op og gennemgår designet og eventuelle rettelser hertil. Oftest er det også mig, der lægger siden online, men hvis der er tilkøb / programmeringer, ryger opgaven videre til et andet led i firmaet.
35
For både tablets og smartphone forsøger vi at tilpasse designet så godt som muligt. Det er ikke elastisk på samme måde som en responsiv udgave, og vi kan ikke helgardere os, hvis kunden kun har bestilt en standardløsning - dvs. sikre at designet står pænt på ALLE former for tablets, smartphones og skærmstørrelser. Derfor anbefaler firmaets konsulenter, at kunden bestiller en responsiv udgave af designet også.