O pgave n Opgaven gik ud på at designe logo og lave et redigerbart, responsivt website som skulle være en slags udvidet visitkort til Henrik Libak, ejer af Libak Retail, som er et nyoprettet konsulentfirma. M i t b i drag t il op gav e n a fsend er Jeg designede logoet lavede layout af websitet, lavede billedbehandling af fotos og tegnede grafikker til sitet. Jeg stylede, opsatte sitet i wordpress admin hvor jeg kodede direkte i php en via en browser. Jeg testede websitet på forskellige platforme: smartphone, tablet, bærbar og stationær desktop. Jeg testede sitet i forskellige browsere: Chrome, Safari, Opera Firefox og Explorer 11, hvor det fungerede rigtig fint. Samt finde ud af at følge og udtrække statistikkerne for hans site, da jeg har implementeret Google Analytics. Henrik Libak har en baggrund som direktør i Dansk Supermarked, og 28 års erfaring med at skabe resultater inden for bl.a. forretningsudvikling, ledelse og salg. Han har siddet i stillinger som: varehuschef, indkøbschef, salgsdirektør, stormagasinchef, kædedirektør og direktør. Nu har han oprettet en selvstændig konsulentvirksomhed, hvor igennem han tilbyder forskellige konsulentydelser og foredrag til større og mindre virksomheder og kæder. Op gaven ı 2
Modtager opgaven Leverer logo Overdrager site Vores kundeansvarlige modtager opgaven fra kunden Jeg bliver bliver briefet på opgaven Vores kundeansvarlige skriver i samarbejde med kunden det tekst som skal indgå på sitet Vi modtager godkendelse på logo og laver filpakke med eps, ai, png og jpg, som vi leverer til ham Vi får oplyst hvilke emner der skal indgå på websitet. Jeg køber domæne og opretter hosting hos udbyder Jeg bliver briefet på sitet og laver lidt skitser og noter til mig selv ikke bruger for meget tid på de enkelte dele af opgaven Jeg flytter sitet over på den rigtige url og laver overdragelse, hvor vi forklarer kunden hvordan han bruger sit nye site Jeg finder en template som indeholder nogle af de funktioner vi har behov for, jeg køber og downloader den Vi modtager rettelser og jeg korrigerer dem Jeg tegner en skitse af sitet og skriver hvilke funktioner de forskellige sections skal have Jeg layer layout af sitet i Photoshop, hvor billedbehandling og udarbejdelse af grafikker i illustrator, er en del af opgaven filerne ud på roden. Jeg tilgår sitet via en browser og styler det direkte i php en ved hjælp af CSS, HTML og javascript Vi laver en estimeret tidsplan, så vi kan give en mere præcis overleverings dato til kunden, og for at jeg kan sørge for at jeg Vi læser korrektur på layoutet og jeg laver en præsentation af weblayoutet som sendes i korrektur hos kunden Jeg downloader den nyeste version af wordpress og opretter forbindelse til hostserveren, hvor jeg ligger wordpress Jeg laver et hurtigt mindmap udfra Libak Retail. Jeg laver skitser og udkast til til logo og udvælger et logo, som sendes i korrektur hos kunden Vores kundeansvarlige og chefen for teknologiafdelingen afholder møde med kunden, hvor viser sitet som ligger i vores test area. Kunden godkender. Jeg tester løbende sitet på forskellige platforme, for at få tilpasset designet. Jeg tester også i forskellige browsere, for at kunne nå ud til flest muligt arbejdsproces ı 3
Mindmap ı 4
Skitser lo g o Jeg lavede nogle skitser til logo inden jeg gik igang med at videreudvikle på computeren Her er jeg ved at finde formen, det tydelige Libak foroven, og retail i en kompakt lidt kantet font med masser af luft mellem bogstaverne for at give det et moderne pust og som kontrast til det fede Libak foroven, sådan at logoet ikke bliver for tungt at se på. Evt. med en skillestreg mellem de to For svær at læse, men måske den blå farve ville være god, da den symboliserer troværdighed Godt med en lidt kompakt firkantet font til retail To tynde sammen bliver ikke tydelige nok Denne nærmer sig Retail vil blive for småt i forhold til Libak, hvis det skrives på denne måde og dermed ikke læsbart i små størrelser Bliver måske for langt For street og for naivt For enkelt S ki tser logo ı 5
Step 1 Step 2 Step 3 Step 4 Jeg prøvede nogle forskellige fonte af, og legede med luft mellem bogstaverne. Jeg prøvede nogle forskellige fonte af til retail, og jeg pudsede detaljer af på de fonte jeg syntes bedst om til Libak. Nu havde jeg fundet frem til de 2 fonte jeg ville bruge til logoet, så nu skulle det fin-pudses Det færdige logo. Jeg brød mig ikke om afslutningen på hullet i A'et, så jeg ændrede det til nedenstående. Alt for rund og svær at læse når der kommer meget luft mellem bogstaverne Libak i henholdsvis bold og black. Med skillestreg i blå. Afstanden imellem de to ord = e'et. Stregen ligger midt i tværstregen på e et. Jeg synes at denne afslutning er mere ren og passer også bedre til K'et. Bedre men for høj......her jeg trykket den lidt men så bliver den for uens Jeg brugte e'et som afstand mellem de to ord da det giver ro for øjet. Jeg valgte den tykkeste af dem og lavede stregen om til grå, da en tynd blå sterg kan blive svær at trykke, hvis der bare er en smule mispas, vil stregen hurtigt få et rødligt skær. Da jeg sad med det blå logo til sidst, syntes jeg måske alligevel at der var lidt for megt bank over det, så jeg prøvede at gøre det sort, og det gav faktisk logoet en lidt mere moderne udtryk. Den her er god fordi, den er bred i bogstaverne så den fylder pladsen ud, og ikke for høj. Den er lidt kantet så den danner en slags linje under Libak, som er god for øjet. Desuden er den ret moderne i udtrykket. Da jeg var bange for at man ikke helt ville kunne se at a'et var et a, prøvede jeg at lægge lidt til forneden, men besluttede at det trods alt var bedre uden, da de blev en lidt irriterende detalje for mit øje Libak i henholdsvis bold og black. Uden skillestreg. skitser logo ı 6
1 skitser & not e r u nde r b ri e f 2 l ayou t i p hotosho p Proc es Da sitet er en one-pager, har jeg ikke lavet flowchart, da detikke giver mening at lave et flowchart over et site, som ikke har et flow. Jeg har her istedet vist de skitser og noter + layout jeg lavede inden jeg gik igang med at opsætte sitet. På næste side ses det layout, vi sendte i korrektur hos kunden. Usa b ili ty For at man kan tale om god Usability er der tre punkter som gerne skal opfyldes: funktionalitet, effektivitet samt give en god brugsoplevelse til sin målgruppe. Derfor er det også vigtigt at kende sin målgruppe inden man går i gang. Må lgru ppe Målgruppen ligger i det blå og violette segment i følge Minervamodellen. Det er både mænd og kvinder, de er ca. 37-60 år og ofte selvstændige. De er typisk uddannede indenfor detail og er måske franchisetagere i en detailkæde eller har en leverandørvirksomhed til detail industrien. De er konstant på udkig efter at lave en god handel og øge væksten i den virksomhed de arbejder for. Rent politisk ligger de til højre for midten og sætter gerne krydset ud for Venstre, Konservative eller Liberal Alliance. Funktiona li tet Da kunden ønskede at hans website blot skulle være en slags udvidet visitkort valgte jeg at lave sitet som en one-pager, da sitet dermed ikke skulle have så meget indhold, men blot være i stand til at oplyse brugeren om Henrik Libak og hans firma Libak Retail og hvilke ydelser han tilbyder. En simplificeret udgave af Minervamodellen, som er et godt stykke værktøj, når man skal segmentere. Effektiv itet Hvis et site skal have en god effektivitet må der ikke skulle klikkes for mange gange, før brugeren finder de oplysninger han/hun har brug for at finde. Derfor er netop one-pageren en gød løsning i dette tilfælde, da sitet ikke har så meget indhold, så al informationen sagtens kan være på en side. Samtidig har jeg lavet en fixed menu, som har deep links, der flytter brugeren lige derhen på sitet hvor han/hun har brug for. God b rugsoplev els e For at brugeren skulle få en god brugsoplevelse tænkte jeg på målgruppen, som er moderne men også traditionelle. Jeg ville gerne kombinere disse to ting. Jeg lavede derfor websitet som en moderne one-pager med parallax scrolling og brugte beton og ridser for at give det et moderne udtryk med kant. Samtidig blev opbygningen meget taditionel og genkendelig, med en menu i toppen, et logo som linker til home, kontakt nederst, link til sociale medier i footeren og let genkendelige ikoner hele sitet igennem. Det er vigtigt for brugeren i denne målgruppe, at kunne genkende strukturen i sitet, så de ikke bliver frustrerede over ikke at kunne finde de oplysninger de søger, det må ikke blive for indviklet. ski tser w ebsit e ı 7
På denne side har jeg vist det præsentations layout, jeg sendte til godkendelse hos kunden index section 1 statement section 2 Consult section 3 consult/process section 3-4 process section 4 talks section 5 About section 6 About section 6 contact section 7 layou t p ræsentat io n ı 8
Fø r - layou t Kortet gik hele vejen over skærmen logoet var ret lille og ikonerne var små og mørke. I footeren havde jeg sat plads af til forskellige social media links, da jeg ikke vidste hvormange kunden var på. Nu - det e nde lig e sit e Kortet fylder kun halvdelen af bredden nu, på desktop. På tablet og smartphone ryger den hvide kasse ind under kortet og begge dele fylder bredden ud. Logoet er blevet større og ikonerne ligner mere dem på de foregående sider. I footeren var det kun LinkedIn der fik lov at blive, resten bruger han ikke. layou t ı 9 korrektur R et t e lse r O psæt n i n g a f site Da kunden havde set layoutet var der nogle få rettelser jeg skulle have med på det endelige site. Der var et par ekstra sektioner, nogle tekst rettelser, og lidt udseende. Han ville f.eks. gerne have at kortet på kontakt-siden skulle være mindre, så det lavede jeg en skitse på, men lavede ikke et nyt layout, vi var nemlig enige om at de rettelser, som skulle laves sagtens kunne vente til det endelige site, da kunden gerne ville have sit site ret hurtigt. Jeg lavede først en skitset over hele sitet - en slags wireframe, hvor jeg gik ind og fik overblik over hvilke funktioner de enkelte sections skulle have, så lavede jeg en skitse på en portfolio section hvor jeg skrev nogle få noter undervejs. De fleste noter lavede jeg i TextEdit, for på den måde kunne jeg gemme små stykker kode, passwords og ligende ned sammen med noterne. Undervejs lavede jeg også en need to have / nice to have liste, med en estimeret tidsplan, da jeg skulle se om jeg kunne overholde min deadline. Den gik jeg løbende ind og tjekkede af på efterhånden som jeg fik løst opgaverne. Jeg nedskrev også den faktiske tid jeg brugte på de enkelte opgaver, så jeg kunne følge med i, om jeg fik brugt for meget tid.
R esp onsi vt w e b desi g n Jeg har lavet sitet responsivt ved hjælp af media queries i CSS'en, hvor jeg har skrevet de ændringer ind der skal ske for hvert trin nedefter. Så når sitet bliver mindre tilpasses det til den skærmstørrelse der er relevant. Her på siden har jeg vist et par eksempler på nogle af de ting jeg har justeret så de passer til de forskellige skærmstørrelser. ta b let Da skærmbredden er betydeligt mindre end på en desktop, har jeg sparet noget plads ved at lave en knap med et ikon på til menuen istedet, når man trykker på den, ruller menuen ud nedenfor og man kan herfra navigere til de andre sections. D eskto p ta b let sma rtpho ne Her fylder teksten 66,666% af bredden, da det ville give for lange linjer at læse hvis den fyldte hele bredden, da man som tommelfingerregel ikke bør have tekstlinjer på mere en 70 tegn. Karriereoversigten er delt i to kolonner, da det helt klart er pænest ikke at fylde skærmen hele vejen over. Her fylder teksten hele bredden, da linjerne har en fin læsbar længde. Karriereoversigten er nu i en kolonne, da det ville blive for korte spalter ved to kolonner. Når skærmen bliver så lille som på en smartphone, flytter ikonet op over tekstboksen og giver dermed mere plads til teksten, så den kan få lov at fylde hele bredden. R esp onsivt w eb d esign ı 10
one pager cms - hvor da n? På et one page website, laver man ikke flere forskellige html-sider men istedet flere forskellige sections, som man ligger ind på samme side. Jeg har på de følgende sider vist hvordan jeg oprettede de forskellige sections og hvordan jeg fik dem kædet sammen med brugerfladen på wordpress, så kunden selv kan redigere i indholdet af sit website, uden at være istand til at kode. Da det hele hænger sammen på kryds og tværs, er der nogen af tingene som sagtens kan gøres i en anden rækkefølge, men jeg har prøvet at redegøre for det, på den måde jeg syntes var lettest at forstå. Jeg startede med at lave tre nye php filer som jeg kaldte consult-loop.php, talks-loop. php, og leadership-loop.php, men jeg har valgt kun at vise det for consult-loop.php, for at gøre det nemmere at gennemskue processen. Figur 1 Jeg lavede en ny array i theme-options.php filen, som jeg kaldte Consult section. Denne array danner et nyt felt på brugerfladen i Wordpress, så man kan gå ind og vælge den til når man skal opbygge strukturen på sit website. Det er herfra man styrer websitets opbygning, ved at vælge de sections man vil have der skal indgå på sitet og placere dem i den rækkefølge man vil have de skal komme i. Figur 2 Figur 3 one pager cms - h vor dan? ı 11
Her er consult-loop.php åben, jeg har lavet det som en portfolio category så man inde fra portfolio på WP-administrator panelet kan redigere i teksten. Jeg tildelte denne section id et consult. Her knytter jeg consult-loop.php til vores homepage. Dette stykke kode fortæller at når consult_contet bliver kaldt, skal den hente det indhold, som ligger i filen: consult-loop.php. Figur 4 Figur 5 Her consult section, som den ser ud i browseren. Her skriver jeg det id ind som jeg har givet til den valgte section, og giver menu-punktet en titel. På den måde laves der en menu, hvor hvert menu-punkt linker til hver section. Så når man klikker på linket i menuen, i browseren, scroller den ned til den section der passer til id et. Figur 6 Figur 7 one pager cms - h vor dan? ı 12
Jeg har oprettet de tre portfolio categories jeg havde behov for til sitet så man inde fra portfolio på WP-administrator panelet kan redigere i teksten. Jeg tildelte kategorien Konsulentydelser den korte titel consult. Her i consult-loop.php filen har jeg hardtypet de ting ind som gør filen unik. Jeg har lavet en Serch Query som siger: Ved indhold af post typen portfolio skal du finde portfolio kategorien med navnet consult og hente det indhold den har. Figur 8 Figur 9 Figur 10 Figur 11 Her er vi inde i en portfolio post. Denne har jeg tildelt kategorien konsuletydelser, hvilket gør at den bliver en af de punkter som bliver vist i sectionen med id et consult når indholdet af kategorien consult bliver kaldt. (Se figur 9). one pager cms - h vor dan? ı 13
Nu kan kunden selv gå ind og redigere i teksten. Figur 12 Figur 13 Figur 14 Figur 15 one pager cms - h vor dan? ı 14
Her kan man vælge hvilken periode man vil se statistikken for. Her indstiller man hvilket land man gerne vil se statistikken for, idet her tilfælde har jeg valgt Danmark, da vi må forvente at det er her trafikken er størst, da Libak Retail er et dansk firma. Nu har jeg skiftet til verdenskort. Det har jeg gjort ved ikke at skrive noget i feltet om hvilket land man vil se statistik for. Når man holder cursoren over de forskellige lande, kan man se hvor mange besøg der har været fra det enkelte land, her har der været 2 besøg fra Sverige. Her bestemmes hvor mange byer man vil se på kortet, når man holder cursoren ind over kortet kan man så se hvor mange besøg der har været for den enkelt by, som vist på kortet her, har der været 96 besøg fra København. one pager cms - h vor dan? ı 15 Stat istik Kva lit etsv ur d eri ng Da kunden gerne ville kunne følge trafikken på sit site, implementerede jeg Google Analytics, som jeg lagde ind i kontrolpanelet så kunden selv kan styre hvor mange dage han vil se statistik for, om det er for Danmark, et andet land eller hele verden. Hvor mange byer ad gangen, altså om det er alle byer der har besøgt hans site eller om det bare er top-10, top-20 eller andet. Jeg har undervejs måtte lave nogle design-mæssige kompromis dels pga. kundens ønsker til udseende og dels pga. tiden. Det var også derfor jeg havde en need to have / nice to have liste, for først og fremmest skulle alt det nødvendige laves, derefter måtte jeg så se på om der var tid til at lave det ønskede, og det var ikke alle de ønsker jeg fik opfyldt. Men kunden blev meget glad for sit site og det er godt besøgt, så de ultimative krav er blevet indfriet.
one pager cms - hvordan? ı 16