Rapport om projekt 4 - Redesign af Wordpressportfolio

Transkript

1 Rapport om projekt 4 - Redesign af Wordpressportfolio Design Brief Med denne opgave ønsker jeg at fremvise min udvikling efter første semester som Multimediedesign- og Kommunikationsstuderende på Copenhagen Business Academy Lyngby. Denne udvikling vil blive fremvist gennem et fuldt funktionelt redesign af min wordspress portfolio, der er udarbejdet uden brug af CMS-systemer. Design argumentation Begrebet Less Is More, opsummerer i virkeligheden hele konceptet bag mit design. Før jeg påbegyndte min foranalyse, havde jeg allerede sat mig for at jeg ville lave et enkelt og overskueligt design. Min simple tilgang til designet, skulle efter mit eget koncept udtrykket professionalisme samt nytænkning. Efterfølgende startede jeg min idégenerering, gennem udførslen af en nedskreven brainstorm. Efter at have nedskrevet og dernæst sorteret i alle mine umiddelbare idéer, stod ord som minimalistisk og moderne tilbage. Jeg begyndte dernæst at klarlægge hvordan disse skulle komme til udtryk i netop mit personlige design. Dette viste sig dog hurtigt som værende en stor udfordring da vores uddannelse ikke blot hedder multimediedesign, men multimediedesign OG kommunikation. Jeg valgte derfor med udgangspunkt i min brainstorm, at bruge ethos som overvejende appelform. Jeg skulle med andre ord sørge for at mit designmæssige udtryk visuelt og kommunikativt, blev viderebragt korrekt til min ønskede interessent. Og når man er født kvinde, er det ved naturlov besluttet at man er meget selvkritisk, hvilket resulterede i at jeg lavede utallige redesigns af redesignet og kørte helt fast i designprocessen. I dødvandet af dette var Kill your Darlings samt brugen af mine tillærte færdigheder inden for design og visualisering min redning. Da jeg havde fået styr på mit layout, ville jeg gerne skabe noget ekstra individuelt for mig: et logo. Noget jeg kunne sættes i relation med. Jeg ønskede at logoet skulle være simpelt og klassisk, for at bibeholde mit gennemgående tema, Less is More. Jeg skabte derfor dette logo:

2 Efter mange velovervejet designmæssige beslutninger er jeg nu færdig og klar til at fremvise mit online visitkort udadtil. Jeg syntes selv jeg har opnået at skabe en personlig portfolio, der fremviser mine færdigheder inden for både multimediedesign og kommunikation. Design og visualisering med eksempler på kode Eksempler på koder og forklaring Kreeringen af min personlige portfolio er baseret på HTML med et eksternt CSS <style> dokument. Jeg valgte at lave et eksternt CSS dokument, fordi jeg ønskede at selve layoutet, tekstformatering mm. skulle gå igen på alle sider. Og skulle jeg ønske noget specifikt for hvert enkelt element, kunne jeg definere disse med <a id= # ></a>. Men til brugen af de større sammenhørige grupperinger, brugte jeg <div class= # ></div>. Farvekoder og farvevalg: Begrundelsen for valget af ikke-farver, i form af kontrasterne grå og hvid, er et valg der er truffet med fuldt overlæg. Disse kontraster optræder oftest ens i alle browsere, hvorimod forskellige brugerdefineret og avancerede farver kan variere. Valget om næsten udelukkende at bruge kontraster er altså truffet for at kunne opretholde designets æstetik og visuelle udtryk. Med mit udgangspunkt i det minimalistiske ønskede jeg, som før nævnt, ikke at gøre megen brug af farver. Men jeg ønskede dog alligevel at bryde de hvide (#fff), grå (#666) og lysegrå (#CCC) kontraster, ved at inddrage en rød farve. Denne røde farve (#F00), repræsenterer det spændende og er et forsøg på at drage brugerens øje. I sammenhørighed med de andre lyse farver fungerer den røde farve perfekt som blikfang. Layout - eksempel på kode og forklaring Layoutet i sig selv er på siden meget enkelt og dette er med fuld overlæg. Jeg ønskede i mit design af skabe et webdesign med indhold der larmede meget lidt. Når farverne er holdt afdæmpede, når det er lyst og når det er simpelt, har brugeren mere ro til at navigere rundt på sitet. Der hvor jeg har ønsket ekstra opmærksomhed, har jeg valgt at lave farverne larme lidt mere. Denne øgning af støj i designet, indfanger brugerens opmærksomhed på de rette tidspunkter. Brugeren forstyrres således ikke af distraherende elementer, men holder fokus på det essentielle. Layoutet er opbygget af en mainwrapper:

3 !! CSS:!!.mainWrapper {!!! height: 100px;!!! width: 1120px;!!! margin: auto;!!! }! HTML:!! <div class="mainwrapper"></div> Denne mainwrapper, sætter rammen om de to side om side stående hovedelementer. Disse er defineret ved en henholdsvis left- og en rightwrapper. Herunder er leftwrapper defineret.! CSS:!!.leftWrapper {!!! width:580px;!!! height:600px;!!! margin-top:-50px;!!! margin-left:-55px;!!! background-image:url(images/paper4.jpg);!!! background-repeat:no-repeat;!!! background-position:center;!!! }! HTML:!! <div class="leftwrapper"> Genkendelighed: Logoet - den såkaldte hjem-knap Et bestemt element jeg ønskede skulle gå igen, var det venstrestillede logo. Jeg ønskede at logoet skulle være et konstant element som brugeren kunne navigere ud fra, således at man altid hurtigt og nemt kunne komme tilbage til udgangspunktet. Så selvom logoet er defineret som værende baggrund i leftwrapper, ønskede jeg alligevel at gøre dele af dette klikbart. Jeg definerede koden således:

4 ! CSS:!! #home-link {!!! position: fixed;!!! top: 260px;!!! left: 70px;!!! width: 500px;!!! height: 100px;!!! }! HTML:!! <a id="home-link" href="frontpage.html"></a> Ved at lave en boks med brugen af id, kunne jeg gøre et unikt område at baggrunden klikbart og derved understøtte mit designprincip om ekstern genkendelighed, idet at hjemknappen fra andre systemer er velkendt som værende logoet. Overskuelighed, og direkte adgang til konkret information: Når en bruger bevæger sig rundt på et site, må der ikke være nogle blande veje. Wayfinding samt navigation skal være enkelt. Brugeren skal derfor altid kunne komme retur til forrige side ved at linke sig tilbage på logisk vis. Et effektivt hiraki er derfor en nødvendighed når menuen, den såkaldte header eller sidebar udarbejdes. Man kan på den måde menubaren er opstillet på, se at dette er en klar gruppering, noget der hører sammen. For en bruger kan det være tidsbesparende og overskueligt når ting er grupperet. Med mit design har jeg også valgt at benytte mig af dette princip. Jeg har valgt at lukke den højrestillede box med en grå farve, for at understrege at teksten inden i denne konkrete box, med et klik ude på menulinjen, er foranderlig. På den måde kan brugeren hurtigt afkode designet og bliver fortrolig med sin egen færden på sitet. Ligeledes har jeg under hvert menupunkt valgt at skrive en lille kursiv forklaring, således at brugeren konstant er orienteret om hvorfor han/hun befinder sig på pågældende side og hvilken type information der er adgang til. Links er desuden på alle sider markeret med <b> tag </b>, og bliver ved a:hover rød (#F00), således at brugeren hurtigt kan lokalisere link og klikke videre. Kommunikation og formidling Kommunikationsmæssigt har jeg valgt 2 forskellige udgangspunkter:!

5 ! Det humanistiske paradigme! Lasswell s formel - Kanyleteorien Umiddelbart virker disse to som modstræbende parter, idet den ene hævder at være et medskabende element, medens den anden meget modelbaseret og sprøjter informationen direkte ud til modtageren. Jeg har derfor brugt Lasswell s formel som struktur for meningen med min portfolio, men jeg har samtidig haft det humanistiske paradigme i baghovedet da jeg gerne med ethos vil styrke mit designs troværdighed. Humanistiske paradigme: I henhold til kommunikative paradigmer, har jeg i høj grad med mit design lagt vægt på det humanistiske paradigme. Jeg har valgt det humanistiske paradigme, fordi jeg ser brugeren som en centralt participant i skabelsen af mit webdesign. Hvis brugeren/den eventuelle modtager ikke kan bruge sitet, er der intet formål med at skabe det. Derfor har jeg besluttet at gøre brug af humanistiske tiltag som blandt andet sprog. Dette forklarer hvorfor at min hjemmeside er være.com i stedet for.dk. Desuden har jeg valgt at skrive den på engelsk, kontra at skrive den på dansk, da flere uden tvivl er engelsktalende end dansktalende. Derved kan jeg ramme en større målgruppe og desuden få større aktivitet på mit site. Lasswell s formel - kanyleteorien: Hvem --> Siger hvad --> I hvilken kanal (mediet) --> Til hvem --> Med hvilken effekt! Hvem siger hvad? Hvem er afsenderen?! I dette tilfælde er det mig selv der er afsenderen, idet jeg har udarbejdet produktet.! Hvem siger hvad? Hvad er budskabet?! Budskabet er at jeg med dette redesign skal vise min udvikling og vise hvilke! færdigheder jeg har tillært mig på uddannelses indtil videre.! I hvilken kanal? Hvilke medier er der brugt i denne? Ulemper fordele?

6 ! I udarbejdelsen af min portfolio har jeg brugt programmer som Dreamweaver,! Photoshop, Illustrator, Flash, Pages (tekstprogram) og InDesign.!! Fordelene ved brugen af disse medier er at man har mange muligheder og! designmæssigt er der meget frie tøjler. Der er stor mulighed for at lave noget meget! personligt, da man selv bestemmer hele udtrykket og stemningen.! Dette kan dog ligeledes også vise sig at være den største ulempe. Fordi man har! lavet noget man selv syntes er godt, er det ikke ensbetydende med at brugeren! deler samme synspunkt. Sammenspillet mellem afsender og modtager er næsten! ikke eksisterende på sitet.! Til hvem? Hvem er modtageren af budskabet? Hvem ønsker jeg at henvende! mig til?! Jeg kunne godt tænke mig at tage 3. semester i udlandet. Så denne portfolio er til! dels ment som et udstillingsvindue til en fremtidig uddannelsesinstitution.! Den er dog delvist også skabt til at fremtidige arbejdsgivere kan kigge på mit! arbejde og vurdere om jeg er kvalificeret til den type stilling de ønsker at besætte.! På denne måde kan de uforstyrret stifte bekendtskab med mine forskellige! kompetencer, arbejdsområder samt erfaring.! Hvad er effekten? Kan modtageren lide det han/hun ser? Kan noget misforstås?! Det kan være svært for en virksomhed at bedømme en person udfra deres online! portfolio præsentation. Spørgsmål såsom overholdelse af deadlines, allokering af! resourcer og evne til at indgå i et større team er bare nogle af de få spørgsmål der! kan melde sig som en problemstilling hos en arbejdsgiver. Disse er ting der skal! afprøves i praksis får de kan bedømmes.! SEO Optimeringstiltag: Jeg har i henhold til forbedringen af min SEO valgt at benytte mig af følgende tiltag:! HTML:!! <meta name="description" content="caroline Lundholm online portfolio, about Caroline Lundholm, contact Caroline Lundholm, studying multimediadesign and communication at copenhagen business academy lyngby, designed musical poster for

7 Vestfyns Gymnasium, creating creative and innovating web designs, simple web designs "> Denne kode dækker over mulige sætninger, samt længere sammenhængende tekst man gerne vil sættes i relation med, blandt andet på søgemaskiner. Keywords jeg gerne vil forbindes med:! HTML:!! <meta name="keywords" content="portfolio, learning, multimediedesigner cph business lyngby, forside, frontpage, projects 1 st semester, learning process, redesign the website Soeren K, projects, learning, contact Caroline Lundholm, home, about, photography "> Derudover har vi alle i klassen linket til hinandens portfolioer for at øge vores sidevisninger og derved vores pageranks. Remake af tidligere projekter I henhold til opgaveforuleringen, har vi fået stillet til opgave at redesigne vores tidligere udarbejdet gruppeprojekter, delvist eller helt. Disse ændringer er mit subjektive syn på hvorledes jeg alene ville udarbejde eller forbedre projektet. Jeg har valgt at basere mine ændringer på den tilbagemeldte konstruktive kritik fra mine undervisere.! Projekt 1 (+ projekt4) - Wordpress portfolio:! Remaket af projekt 1 er formelt set projekt 4. I denne rapport har jeg redegjort for! mine designvalg og overvejelser i udarbejdelsen af portfolioen.! Projekt 2 - Bannerprojekt:! Dette var det første gruppearbejdeprojekt, vi udarbejde sammen 3! kampangebannere samt en landingpage, til kulturnatten 2012.! På tilbagemeldingen skrev underviser DSK under Look og Feel: Godt arbejde med de grafiske og visuelle udtryk. Det er måske samlet set en smule julet i udtrykket, men hænger fint sammen og er godt dokumenteret i rapporten.! Derfor valgte jeg at lave følgende ændringer i vores bannere:

8 ! Før:! Efter:! Jeg ændrede farverne på bannerne fra mørk blå, til helt sort. Dette gjorde jeg for at! fjerne den juleagtige association. Den sorte farve repræsenterer desuden også! natten, som er en reference til selve Kultur Natten.

9 ! Projekt 3! Til projekt 3 var der ingen skriftlig tilbagemelding, men blot en bestået/ikke! bestået. Dette gjorde det en smule svært at komme frem til hvilke ændringer jeg! kunne udføre, da jeg egentlig overordnet set var tilfreds med det endelige! resultat. Jeg gik derfor i tænkeboks og kom frem til at det kunne være sjovt at! komme op med en total makeover. Denne ville jeg udarbejde med intentionen om! at være sitets helt oprindelige design meget tro. Jeg lavede derfor!designet baseret! på de designprincipper jeg har lært på 1. semester.! Før:! Efter:

10

11 Brugertest - Gangstertesten, udført på carolinelundholm.com Testpersoninformation: Alder: 22 år Beskæftigelse: sygeplejeskesturderende 1. Websitets identifikation: Hvilket website befinder du dig på? (3 point) Jeg befinder mig på carolinelundholm.com. Det kan jeg se i den der menu top (fane) og på forsiden. Så det må være der jeg er. 2. Sektioner: hvilket overordnede sektioner findes på websitet? (2 point) Hmm. Jeg kan se der er en menu og der er en aflukket boks til venstre. Menuen er ret nem at se og det er godt. Der er også gode overskrifter til de enkelte afsnit. Det er meget enkelt og overskueligt. 3. Underside: Hvilken underside befinder du dig på? (3 point) Der er en stor overskrift, så jeg har nemt ved at se hvad jeg har klikket på 4. Lokal navigation: Hvilke muligheder har du på dette niveau/hvilke undersider findes på samme niveau? (3 point) På siderne er der mange ting man kan klikke på (links), og der står alt sammen hvad de er hen til. Det er ret smart. Foreksempel på projects siden, så kan man nemt se hvad der er hvad 5. Placerings-indikatorer: Hvor er du i den samlede struktur/hvordan er du kommet dertil? (2 point) Det er ret nemt at finde rundt på siden fordi der er den der menu ude i siden. Jeg fandt også ud af at jeg kunne klikke på logoet Caroline Lundholm, også kom jeg tilbage til forsiden. Der er også store overskrifter. 6. Søgefunktion: Kan du søge, og hvor kan du det? (0 point) Nej Resultat af gangstertest: Mit website opnåede i alt 13 point, hvilket vil sige at den navigationsmæssigt ligger i den gode ende hos denne bruger. Da jeg har fokuseret på enkel navigation i mit design, er det

12 begrænset hvor mange undersider jeg egentlig har. Dette viser sig for denne bruger subjektivt at være en positiv oplevelse. Flow chart over carolinelundholm.com Mit flowchart viser hvorledes min hjemmeside er opbygget. Jeg har hele tiden ønsket at bevare enkeltheden i mit design samt min navigation. Jeg udførte min gangstertest på en person med relativt lidt kendtskab til internetnavigation, og selv denne testperson kunne finde rundt på siden. Selvom det at udføre brugertesten på kun én person ikke er et repræsentativt udsnit, er det alligevel brugbart for webdesigneren, idet man får et fingerpeg om hvad der intuitivt fungerer og hvad der ikke gør.

13 Overordnet konklusion + læring Dette 4. projekt må i den grad siges at have været meget lærerigt. At gå fra at have arbejdet i teams under de sidste 2 projekter, til pludselig at sidde ene mand, har været lidt af en opgave på både godt og ondt. For mig at se er det at arbejde i teams en stor fordel, da man kan bruge hinanden som sparringspartnere og at man kan lære nye ting af sine gruppemedlemmer. Derudover er det at arbejde i grupper også et sted hvor der til tider må tages demokratiske beslutningstiltag. Hvortil man bare må indstille sig på at ens idéer ikke altid kan føres ud i livet. Dette er nødvendigvis ikke en dårlig ting, da man derved lærer vigtigheden i til tider at kunne gå på kompromis. Fordelen ved at arbejde alene er dog en klar ting: man er selv chef. Man bestemmer selv sine arbejdstider, sine designs og sine skriftlige formuleringer. Men, når deadlinen nærmer sig og projektet skrider ind i den afsluttende fase, er man også selv ansvarlig for at samle alle de løse ender. Dette har for mig været en meget lærerig proces, idet jeg har lært hvorledes jeg skal prioterere min tid. Jeg har inden for programmer såsom dreamweaver og photoshop tillagt mig en del færdigheder. Det er gået op for mig hvor detaljeorienteret man hurtigt bliver og selv bare 1 pixel kan gøre en stor forskel. Så når man tager en beslutning om at opstille et layout på en bestemt både, er det også vigtigt at kunne argumentere for hvorfor man netop har gjort det. Dette har for mig også gjort mig meget bevidst om at skabe en rød tråd gennem hele designet, ved at lade gå elementer igen. Jeg vil løbende glæde mig til at opdatere min nye portfolio og se hvordan den udvikler sig over de næste år. Samtidig vil jeg glæde mig til at se tilbage på min udvikling, som jeg gør lige nu med dette halve år der er gået. Jeg syntes det er utroligt hvor meget jeg personligt har rykket mig, fra min første HTML side, til hvor jeg er i dag. Og jeg ved at med hårdt arbejde kan jeg rykke mig endnu mere.