Introduktion til websiden PPHansen.dk En fag præsentationsside af Palle Preben Hansen Eksamensopgave i Webdesign og Grafiske værktøjer, 5. semester SIV.
Indholdsfortegnelse Indledning... 2 Udviklingsprocessen... 3 Første iteration... 3 Præsentation af websiden... 9 Indhold og udtryk... 9 Opbygning... 15 Forbedringer... 17 Refleksion... 17 Referencer... 18 1
Indledning Jeg har fået til opgave at oprette en webside, der skal fungere som fag præsentationsside. Websiden skal være dedikeret til mig selv, og være mit ansigt udadtil i en professionel sammenhæng. Den skal dermed kunne fungere som CV side - eller nærmere, som en personlig platform ud fra hvilken jeg skal forsøge at "sælge" mig selv. Til dette formål vil jeg benytte mig af teorier og begreber, vi er blevet introduceret til i løbet af kurset Webdesign. Jeg vil desuden bruge den viden jeg har tilegnet mig på kurset Grafiske værktøjer, samt kurset Web kommunikation, som vi havde på 3. Semester. Opgaven består hovedsageligt i at udvikle og oprette den designmæssige del af websiden, og den lød oprindeligt på at websiden skulle være opsat i Wordpress. Dette er et online content management system (CMS), hvor man kan oprette en profil, og derefter opbygge en hjemmeside i et tema-baseret template system, der gør det nemt for brugeren at arrangere de forskellige elementer, uden videre erfaring med kodesprogene. Wordpress benytter kodesproget PHP, der muliggøre brug af databaser, ved at kommunikerer det der står i databasen til browseren som HTML. På denne måde tjener den som link mellem browseren og computerens øvrige organisatoriske egenskaber, hvilket gør det muligt at skabe dynamiske websteder, med mulighed for brugersystemer og lignende. HTML står for HyperText Markup Language, og er det sprog man bruger til at kode selve opsætningen af en webside. CSS står for Cascading Style Sheet, og bruges til at beskrive hvordan de forskellige elementer skal se ud rent visuelt. Fordelen ved at benytte disse kodesprog er at de er forholdsvis enkle, samt kompatible med de fleste browsere, og dermed giver et produkt der fungere optimalt på stort set alle platforme (Bilag 1, PowerPoint (PP) vist på kurset Webdesign d. 29/10-2015) Jeg har som udgangspunkt snuset lidt til kodesprogene HTML, CSS og JavaScript allerede, og har desuden en del ressourcer at trække på i form af familiemedlemmer og venner, hvorfor jeg har valgt at lave min webside helt fra bunden. På denne måde opnår jeg den fleksibilitet jeg forventer af mit produkt, og som passer til mit niveau. Jeg vil dermed designe og skrive siden selv i særskilte HTML-filer, ved brug af HTML, CSS og JavaScript, samt udvikle mit eget CMS, som er skræddersyet til at understøtte websiden. 2
Udviklingsprocessen Jeg har valgt at lave et undersøgelsesdesign ud fra lifecycle-udviklingsmodellen. Jeg vil dermed arbejde iterativt i min udviklingsproces, og på denne måde får jeg mulighed for at udvikle og tilpasse mit design hen af vejen, både ud fra mine egne krav og forventninger, men også i samarbejde med potentielle brugere. Modellen som den er fremlagt af Preece et al ser således ud: (Bilag 2, PP vist på kurset Webkommunikation kursusgang 2) Første iteration Kravspecifikationer Først og fremmest må jeg bestemme hvad det er for en slags side jeg vil lave, og hvilke behov der måtte være for en bruger på denne type webside. Dernæst må jeg analysere behovet for visuel kommunikation, på denne type side. Når jeg ved det, kan jeg opsætte nogle konkrete mål for designet. 3
For at finde ud af hvilke informationsteknologier der som et minimum er brug for, og for at få inspiration til yderlige features der med fordel kunne implementeres på hjemmesiden, vil jeg undersøge mit koncept ud fra Wengers model om kommunikationsteknologier. Først må jeg nærmere bestemme hvilken type hjemmeside der er tale om, for at kunne placere konceptet korrekt i modellen. Websiden skal fungere som personlig præsentation af mig selv, i en professionel sammenhæng. Den skal altså primært handle om mig og mine evner inden for webdesign. De budskaber der skal være, vil derfor være centreret om statiske informationer omkring et individ, og de vil dermed være af en asynkron natur. Hjemmesiden er således baseret på individuel adfærd og asynkron kommunikation. Disse karakteristika placerer websiden helt ude i den yderste ring til venstre på modellen, som set på billedet herunder: (Modellen er taget fra bilag 3, PP vist på Kurset Webkommunikation Kursusgang 1). 4
Da jeg gerne vil tiltrække så mange potentielle brugere som muligt, og have mulighed for at hævde mig selv på en lidt mere konkret måde, må jeg bevæge mig længere til højre og lidt ned i modellen. Her finder vi blogs, der er en lidt mere gruppe orienteret teknologi, som tillader at jeg oplyser mine brugere om nye tiltag eller personlige anliggender, uden at forandre det oprindelige formål. Denne teknologi kan dermed forøge sandsynligheden for at flere vil vende tilbage til min side gentagende gange, og er derfor et oplagt valg som supplerende element på siden. For at kunne fastholde brugerne endnu bedre, vil jeg gerne indføre et element af interaktivitet. Dette vil fremme folks interesse i at følge med i hvad der videre sker på siden, når de har læst alt indholdet og de posts der måtte være. På Wengers model kan vi se at den teknologi der passer bedst til dette formål, er muligheden for at kommentere på indholdet. På min webside kunne det være relevant under blog sektionen, hvor det ville introducere et element af deltagelse, og dermed få folk til at involvere sig og blive længere. Disse teknologier kan med fordel understøttes af et bruger-system, der giver folk en identitet og dermed forøger følelsen af tilknytning til siden, samt den grad af interaktivitet det er muligt at opnå. I dette tilfælde vil jeg dog begrænse det til muligheden for at kommentere på posts og lignende, altså til at etablere en tilstedeværelse generelt, for at holde fokus på det siden handler om, nemlig mig. Jeg vil dermed implementere en blog på siden, hvor det er muligt at kommentere på de forskellige posts. Denne blog skal yderligere understøttes af et login/brugersystem, der tillader brugeren at antage en selvvalgt identitet. Når man tager selve formålet med hjemmesiden i betragtning, vil jeg sige at disse teknologier komplimentere hinanden meget godt, og er oplagte til opgaven. De gør det muligt at tilføje information på en ellers statisk platform, og på den måde tiltrække nye seere og fastholde potentielt vigtige brugere. Efter at have bestemt hvilke kommunikationsteknologier der er behov for, kan jeg nu reflektere over mit foreløbige koncept ud fra Thorlasius s kommunikationsmodel, og på den måde bestemme behovet for visuel kommunikation: 5
(Modellen er taget fra bilag 4, PP vist på Kurset Webkommunikation Kursusgang 1). Afsenderen er i dette tilfælde mig selv. Herfor er det nemt at finjustere mine krav, og afstemme dem med produktet i løbet af hele processen. Jeg vil gerne fremstå professionel, og give udtryk for at jeg formår at tænke ud af boksen når det kommer til webdesign. Dette skal afspejle sig i designet. Modtageren er potentielle arbejdsgivere eller forretningsforbindelser, hvorfor websiden må udtrykke troværdighed, og vise at jeg formår at bruge de hovedkompetencer jeg påstår at besidde. 6
Websiden skal selvfølgeligt understøtte alle de normale kommunikationsformer som er nødvendig for at en webside fungere, som en intuitiv navigativ funktion og en konsistent fatisk funktion. Ud fra det jeg har fundet ud af indtil videre, vil jeg derudover ligge ekstra vægt på den æstetiske funktion. Her vil jeg benytte mig mest af den formelle æstetiske funktion, for at vise at jeg har styr på webdesign, men med et touch af den sublime æstetiske funktion, for at vise at jeg også formår at tænke ud af boksen. Ydermere vil jeg ligger vægt på den interaktive funktion, ved at der er mulighed for registrering og konversation. Jeg kan nu opstille mine kravspecifikationer: Websiden skal fremstille mig professionelt, brugeren skal få det indtryk af mig at jeg har styr på webdesign. Den skal være brugervenlig og alsidig, brugeren skal kunne finde ud af siden uden videre instruktion og den skal virke på de fleste platforme. Siden skal indeholde en blog og mulighed for at registrere sig og konversere, brugeren skal få en følelse af aktivitet og tilstedeværelse når de besøger siden. Den skal være udformet så mit budskab, og dermed CV, når ud til så mange som muligt. Design Nu kan jeg opstille min foreløbige informationsarkitektur: 7
Når man kommer ind på siden skal det første der kommer, være en helside video af mig der står og hilser, som derefter glider over i en bevægende baggrund, der ligger inde bag interfacet. Designet skal være udført i hvide farver, for at symbolisere rene, ordnede forhold og navigationen skal være simpel og elegant. Det lidt kliniske udtryk opvejes af den bevægende baggrund, der skaber en følelse af tilstedeværelse, og skriftfarven skal være mørkegrå, for at mindske kontrasten til det hvide. Dette design vil give en god balance mellem det visuelle og det indholdsmæssige udtryk. Nu kan jeg opstille mit endelige organisationsdiagram: Prototype Ud fra dette har jeg udviklet en high-fi prototype, forsiden ser sådan ud: 8
Evaluering Under brugertests af denne prototype udført på kurset Webdesign, fandt jeg blandt andet ud af at det kun behøvede at være muligt at downloade mit CV på den sidste side af CV delen, i stedet for på alle siderne. Jeg fandt også ud af at det ville være mere intuitivt at lave kontakt fanen om til tekst, i stedet for telefon symbolet. Derudover var der meget god overensstemmelse mellem intentionen og receptionen, af websiden generelt. Præsentation af websiden Efter at have tilpasset designet, er jeg nu klar til at præsentere min endelige informationsarkitektur PPHansen.dk Indhold og udtryk De grafiske elementer som ikoner, baggrund, header og footer har jeg lavet i Photoshop, med brug af gradient-tools og gennemsigthed. Mit CV er tilgængeligt som PDF-fil, der er udarbejdet i InDesign. Jeg forsøger at fange brugerens opmærksomhed inden for de første fire sekunder, med en kort intro video. Designet er generelt simpelt og elegant, 9
og udført i et fluid grid design, der gør at siden passer godt på de fleste platforme (Cattaneo, Maier og Spooner 2009, 42-45). Jeg benytter et sprog der er tilpasset og egnet brug på internettet. Indholdet er udgjort af korte, præcise formuleringer og aktuelle tekster, der tilbyder den vigtigste information først, og jeg viser hvad jeg kan ved at linke til tidligere arbejde (Bilag 5, PowerPoint vist på kurset Webdesign d. 24/9-2015). CV-delen ser således ud: Faglige kompetencer 10
Tidligere arbejde Personlige kvalifikationer 11
Persondata Bloggen ser således ud: 12
Kontakt siden ser således ud, her er alle elementer interaktive ( Find mig på google maps eksempelvis): 13
Og de login relaterede sider ser sådan ud: 14
Opbygning Hele siden er bygget op i PHP kode, dermed er design og CMS fuldt integreret med hinanden. CMS systemet, der venligst er udviklet i samarbejde med Ruben Hansen, giver mulighed for at redigere stort set alt på siden, mens jeg er logget ind som Admin, gennem denne særskilte menu (dele af CMS vedlagt som bilag 6): 15
Jeg benytter mig af Persuasive design, gennem call-to-action tiltag (bilag 7, PP vist på kurset Webdesign d. 8/10-2015): Siden er optimeret til google søgning, ved at jeg bruger H1 og H2 tags, og ved at jeg bruger relevante overskrifter og ord gentagende gange i tekststykkerne (Bilag 8, PP vist på kurset Webdesign d. 24/9-2015): 16
Forbedringer Der mangler lidt styling på bloggen og de login-relaterede sider, de kan godt blive meget mere overskuelige. Dette er planlagt til ændring snarest muligt. Der kunne oprettes en engelsk version, hvad der er ret relevant i min situation, og muligt siden jeg også ejer PPHansen.dk. Refleksion Da jeg startede på at udvikle websiden havde jeg kun begrænset erfaring med kodesprogene, men den udfordring jeg satte mig selv for, har tvunget mig til at lære dem ordentligt at kende. Jeg har derfor fået en langt større viden om webdesign generelt, i løbet af processen. 17
Referencer Cattaneo, Alessandro, Andrew Maier, og Chris Spooner. The Smashing Book. Lübeck: Media GmbH, 2009. Thorlacius, Lisbeth. Visual Communication in Web Design - Analyzing Visual Communication inweb Design. 2010. W3Schools. 2015. http://www.w3schools.com/. Wenger, Etienne, Nancy White, John D Smith, og Kim Rowe. Technology for communities. 18. 01 2005. 18