Produktion og workflow STINE D. LAURSEN

Transkript

1 Produktion og workflow STINE D. LAURSEN

2 Website til terapeut Stine D. Laursen Stine er nystatet som terapeut og behøvede en hjemmeside for at markedsføre sig selv til omverdenen. Hjemmesiden skulle ikke være af noget stort omfang, men være et online visitkort og indeholde en liste over behandligsmuligheder med priser. Stine vil gerne selv kunne redigere og varetage hjemmesiden i fremtiden, derfor har jeg valgt at bygge hjemmesiden op i CMS systemet WordPress (WP), som er meget simpelt at redigere og navigere i når sitet først er sat op. Stine havde ikke i forvejen noget materiale eller nogen holdning til designet, så jeg havde meget frie hænder. Sitet skulle selvfølgelig være responsivt, så det automatisk tilpasser sig mindre /større skærme. LAVET FOR Stine D. Laursen PRODUKT Hjemmeside PRODUKTION OG WORKFLOW PORTFOLIO ANNEMETTE LAURSEN H3 31

3 Workflow Processen fra start til ende. Gennemgang af kundens behov Inspirationssøgning Skitsering af idé Godkendelse fra kunden Designudkast Valg af farver og fonte + redigering af billeder til web Opsætning i WordPress Browsertest Endelig godkendelse fra kunden Launch 32 PRODUKTION OG WORKFLOW PORTFOLIO ANNEMETTE LAURSEN H3

4 Inspiration Jeg har fundet inspiration i forskellige temaer og andre terapeuters hjemmesider. PRODUKTION OG WORKFLOW PORTFOLIO ANNEMETTE LAURSEN H3 33

5 Wireframe 1 INDEXSIDEN Det første man møder på indexsiden er et stor headerbillede UNDERSIDER Det smalle headerbilledet skifter fra underside til underside. Temaet der passede den ønskede wireframe bedst og som var nemmest for mig at arbejde i var temaet Puro fra SiteOrigin. Puro er et gratis tema. 34 PRODUKTION OG WORKFLOW PORTFOLIO ANNEMETTE LAURSEN H3

6 Quicksand Bold AaBbCcDd Quicksand Light AaBbCcDd Raleway Regular AaBbCcDd Aa Fonts Stine og jeg blev enige om at hendes logo skulle være et navnetræk i en lidt unik font. Jeg kom med nogle forskellige forslag, men vi endte med at bruge Google fonten Quicksand Bold til navnetrækket. Jeg valgte at holde fast ved Quicksand og bruge den gennengående på hjemmesiden til samtlige headers. Jeg brugte ikke Quicksand til brødteksterne for at skabe et hiraki og en variation imellem overskirfter og brødtekst. Til brødteksten har jeg valgt at bruge Raleway Regular, en font som står skarpt i kontrast til Quicksand, som er blød i sin kontur. Raleway er behagelig at læse også i større mængder. PRODUKTION OG WORKFLOW PORTFOLIO ANNEMETTE LAURSEN H3 35

7 Farver Sitet er holdt forholdsvis neutralt med en gennemgående hvid (#fff) baggrund med tekster i sort (#000) og grå (#626262). Som kontrast til det ellers meget neutrale, har jeg valgt en orange (#ef9517) til at fremhæve knapper og links. Den orange giver et godt spil til de andre farver og til de billeder der er valgt til sitet, som generelt er i neutrale jordfarver. #fff #ef9517 # PRODUKTION OG WORKFLOW PORTFOLIO ANNEMETTE LAURSEN H3

8 100% Kode & responsivity Med WordPress er mængden af kodning begrænset, fordi man arbejder i et pre-build tema, men for at tilpasse og style individuelle billeder eller tekster skriver jeg CSS kode for nogle seperate områder. 70% Til venstre har jeg defineret maximumbredden på tekstfeltet til at være 70%, fordi jeg ikke vil have det til at fylde 100% af sitets bredde. (1) Temaet Puro er forudkodet med et responsivt layout, der automatisk tilpasser sig forskellige skærmbredder, men jeg tager højde for tilpasningen når jeg laver individuelle CSS koder og skriver derfor også en kode til mobil. (2) 1 2 PRODUKTION OG WORKFLOW PORTFOLIO ANNEMETTE LAURSEN H3 37

9 Browsertest Hjemmesiden er testet på de fire mest brugte browsers i Danmark, FireFox, Explore/ Edge, Chrome og Safari. Jeg har også lavet browsertest på to forskellige mobiler, en Samsung og en iphone. Sitet viker som det skal i alle browsers. 38 PRODUKTION OG WORKFLOW PORTFOLIO ANNEMETTE LAURSEN H3

10 Kvalitetsvurdering Både Stine og jeg er yderst tilfredse med hjemmesiden. Stine er meget glad for layouet og enkeltheden i siden. Herudover sætter hun stor pris på, at den er bygget så simpelt op at hun sagtens selv kan navigere rundt back-end og redigere tekster og billeder. Til en hjemmside af så lille et omfang syntes jeg det har været fint at bruge WordPress, så længe man accepterer de begrænsninger der er for det valgte tema. Skal man lave et mere komplekst site, bør man vælge et tema der giver større mulighed for indivduel tilpasning og redigering. Jeg har efterfølgende fået lov til at lave Stines visitkort så de designmæssigt passer til hjemmesiden. Se hjemmesiden her. PRODUKTION OG WORKFLOW PORTFOLIO ANNEMETTE LAURSEN H3 39