Portfolie Redesign www.gaardbodesign.dk Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013 Jens Jákup E. Gaardbo
indholdsfortegnelse design... gestaltlove... opbygning... typografi... logo... farvevalg... seo... flow chart... brugertests... gangstertest... kortsorteringstest... ekspertvurdering... ændringer i tidligere projekter... 3 3 3 4 4 5 5 6 7 7 7 7-8 9 reflektioner over min læring... 10 2
design Jeg lavede, som det aller første, en baggrund i illustrator, der skulle ligge fast på siden, når man scrollede. Det skiftede lidt farve undervejs, men jeg valgte at gå med den mørkeblå, da det er en farve jeg rigtig godt kan lide, og det skulle jo være mit eget personlige portfolio. Jeg gav det en fornemmelse af noget tekstil, så det ikke blev alt for rent og simpelt. Jeg synes selv, at det gør siden behagelig at kigge på. Da jeg så lavede menupunkterne, ville jeg gerne have det til at se ud som om der kom lys i knapperne, når man hoverede henover dem. Derfor har selve siden og teksten i menuen en lysegrå farve, der skifter til hvid på hover fulgt af en hvid skygge. Jeg besluttede mig for at, der skulle være billeder på alle siderne, så jeg har brugt meget tid i photoshop for at lave alle billederne. Jeg lavede de sider, som jeg vidste, skulle være på siden og tilføjede en side, der hedder galleri, som jeg kan bruge som en form for udstillingsvindue, for alle de forskellige projekter jeg laver. Mange af de forskellige effekter, såsom billederne, der kommer farve på, når man hover musen over dem, kom først mens jeg sad og skrev koden. Jeg ville pynte siden og gøre den en smule interaktiv for brugeren. Gestaltlove Jeg har forsøgt at være bevidst omkring gestaltlovene i mit arbejde med min portfolio. I menuen har jeg benyttet loven om lukkethed til at indkapsle menupunkterne, og udover det har jeg ved hjælp af farverne gjort det tydeligt, hvilke menupunkter, der ikke er aktive, dette er loven om ensartethed. Gennem hele sitet er der også tydelige linjer, der skiller header og menu fra indholdet på resten af siden. Det er også en tydelig linje mellem venstre og højre del af sitet, der går igen hele vejen igennem. Selve opbygningen er meget typisk, hvilke giver en ekstern genkendelighed, der gør sitet lettere at bruge. Opbygning Da der ikke var nogle krav til designet af vores portfolio, har jeg haft meget frihed. Da der ikke var så mange menupunkter i portfolioen fandt jeg det ikke nødvendigt med 3
design-fortsat logo en lokal menu, der hele tiden var tilstede. Jeg syntes at det var tilstrækkeligt med en brødkrummesti, der viste, hvor man befandt sig på siden, og at det valgte menupunkt var markeret. Jeg er tilgengæld lavet tilbageknapper, der fører hele vejen til forsiden, hvis man farer vild + et klikbart logo, der også fører til forsiden + klikbare punkter i brødkrummestien, der fører hen til de sider, man har kommer fra. Jeg besluttede mig allerede meget tidligt for, at siden skulle være ret enkel i opbygningen, men indeholde elementer i designet, der gjorde den flot at se på. Mit logo har jeg holdt enkel og uden farver, da jeg bedre kan lide det simpelt og rent. Og med et helt sort logo, kan man altid ændre farverne i alt andet, hvis man bliver træt af sine andre farver. Logoet passer alligevel ind. For at give den glasagtige effekt har jeg lavet refleksion på den, trods læreren. Jeg valgte en meget plain skrifttype, og har strukket i den for at give den mit eget præg og for at få stregen, der går i gennem bogstaverne til at passe sammen med de enkelte bogstaver. Jeg har rykket bogstaverne meget tæt sammen, da jeg synes det giver en god effekt når alle bogstaverne er store. Typografi Jeg har valgt at bruge en helt almindelig sans-serif font, der hedder Verdana, og som denne rapport også er skrevet med. Jeg vurderede det til at have en god læselighed. verdana VERDANA 4
farvevalg seo Jeg kunne godt lide den mørkeblå, så det er den farve min side er bygget op omkring. Overskrifterne er også mørkeblå, men al brødtekst har jeg lavet sort. De farver jeg primært har brugt er disse: #172144 #000000 Vi skulle også ifølge vores opgaveformulering, søgemaskineoptimere vores portfolio. Dette har jeg gjort ved at indsætte meta-tags i headeren i min html, selvom flere større søgemaskiner ikke benytter sig af dem længere. Jeg har brugt description, keywords og author, som kan være med til at hjælpe søgemaskinerne til at finde min hjemmeside bedre. #cccccc #ffffff Derudover, har jeg gjort mig tanker om, hvilke ord i min tekst, jeg gerne vil lægge vægt på. Dvs. hvilke nøgleord, jeg gerne vil findes på med en søgemaskine. Det er ord som multimediedesign, portfolio, webdesign, grafisk design osv. Disse ord har jeg forsøgt at bruge flere steder på siden, så søgemaskinerobotterne får en fornemmelse af, hvad min side handler om. Jeg har også givet siderne forskellige titler i headeren som fx Gaardbo Design - galleri osv. På den måde indgår der igen flere af nøgleordene. Til sidst har jeg linket til min egen side fra facebook og soundcloud. 5
flow chart forside læring profil galleri 1.semester 2.semester 3.semester 4.semester baggrund p1 portfolieprojekt emneområder produktet html-siden # uddannelse jjg@gaardbodesign.dk p2 bannerside facebook.com/jens.gaardbo p3 bannerprojekt emneområder landingpage rapport.pdf p4 websiteprojekt emneområder portfolie redesign det originale website websitet rapport.pdf wordpress html-siden bannerside landingpage (p1-4 er sider med større billeder.) https://soundcloud.com/gaardbo emneområder rapport websiteprojekt 6
brugertests Jeg har udført nogle tests, for at hjælpe mig selv med at lave en side, der fungerer. Det har givet mig et billede af, hvordan andre ser min side. Når man sidder og laver en side kan man let komme til at overse nogle vigtige ting, som andre brugere eller eksperter opdager. Kortsorteringstest Denne test gav mig et billede af, at jeg ikke har ramt så meget ved siden af mht. navigationen. Testpersonen er 23 år gammel og arbejder på en børneinstitution i København. Her er resultaterne: Gangstertest Denne test, der viser, hvor god navigationen er, har jeg udført og er nået frem til følgende resultat: 1. Websitets identifikation: 3 points 2. Sektioner: 2 points 3. Underside: 3 points 4. Lokal Navigation: 1 points 5. Placerings-indikator: 3 points 6. Søgefunktion: 0 points Total: 12 points Da en side kan opnå op til 18 points, er det ikke helt tosset. Med grundet den måde, jeg har valgt at sætte siden op på får den ikke flere points. Ekspertvurdering Jeg har også lavet ekspertvurderings testen, hvor jeg har fået en klassekammerat til at teste min side, og på næste side er resultatet af testen: 7
ekspertvurdering Heuristikker: Navn/nr. Hvor: URL Problem: Beskrivelse Kategori: 1-4 Point Løsning: Forslag til forbedringer #1 systemstatus http://cph76web- Der er en lille grå firkant over 3 kn.dk/laer- teksten som er et link, der ikke ing/1-semes- virker ter/bannerprojekt Ret link, måske ændr den grå firkant, eller slet den helt. #1 systemstatus http://cph76web- kn.dk/html/index- 2.html Jeg linkede fra gaardbodesign.dk og forventede at tilbageknapperne førte mig tilbage dertil. 2 Jeg kan se jeg ryger på wordpressiden, så jeg ved ikke om du vil rette det. Det kræver jo at du lægger det hele over i dit domæne, så siden ligger begge #1 systemstatus http://gaardbode- sign.dk/banner2/- index.html/# info@kulturnatten virker ikke. 1 Hvis du har tid, er det en nem lille en at rette (min virker heller ikke ;) ) #4 konsistens og standarder Knapperne 2, 3, 4 semester i menuen virker ikke. 1 Jeg har regnet ud at det er meningen. Men man forventer dog at der sker et eller andet. #4 konsistens og standarder Tilbageknapperne på siderne i gaardbodesign.dk Iflg. Ekstern genkendelighed virker de ikke optimalt 2 De bør føre til foregående side og ikke op i niveau. Eller du kan kalde dem op el.lign. #4 konsistens og standarder Rapport i portfolio redesign - rapport Alle andre rapporter har ført til en pdf, men ikke denne 1 Bør navneforandres eller udgå. Portfolie redesign wordpress Jeg kan ikke se nogle ændringer? 1 Hvis der ingen ændringer er, bør den måske ikke ligge under et emner der hedder ændringer... Galleri Lydfilens hovereffekt virker mærkelig 1 Det er sandsynligvis meningen, men jeg reagerede med at jeg troede at det var en fejl. 8
ændringer i tidligere projekter Portfolieprojekt I det første portfolieprojekt havde jeg ikke optimeret billederne på min HTML-side, så de var alt for store og tog alt for lang til at indlæse. Dette lavede jeg om. Derudover ændrede jeg yderligere på HTML-siden, så jeg fik en forside og to undersider til hhv. Louisiana og Dansk Designcenter. Jeg ændrede også opbygningen af Html-siden igennem et eksternt stylesheet, således at indholdet ikke virkede som om det flød rundt tilfældige steder. Jeg har også valideret de tre sider og fået dem til at linke tilbage til det nye portfolie. Bannerprojekt I bannerprojektet fik vi at vide, at stemningen og farvevalget, gav mere associationer til juletid end til nat. Derfor gik jeg ind og ændrede den mørkeblå farve til helt sort, da jeg føler at det giver en mere natlig stemning. Jeg ændrede også en anelse i animationerne, på bannerne, og gav landingpagen samme feel som bannerne igen. På landingpagen lavede jeg også en indikator for, hvilken side, man befandt sig på, ved hjælp af class= selected, da de manglede i den originale opgave. Bannerne har jeg fået til at blive vist i Internet Explorer, da de ikke virkede tidligere. Dette gjorde jeg ved at tilføje et movie -parameter i html-koden, som er det IE bruger til at læse flash med, hvor andre browsere bruger embed -tagget. Websiteprojekt På vores egen Søren K-hjemmeside har jeg valgt at lave runde hjørner i wrapperen, så de matcher bedre med menupunkterne. Derudover har jeg ændret hovereffekten på menupunkterne, så de ikke har den samme farve som det menupunkt, der er valgt. Jeg har også benyttet meta -tags, ændret titlen på siden for at søgemaskineoptimere siden. Udover det har jeg ændret lidt i teksten til det samme formål. Så har jeg også ændret lidt i farven, så siden ikke virker så hvid og tom, og jeg synes stadig, jeg har bevaret den enkle stil som vores gruppe satte sig for at lave, men jeg har givet siden et lidt mere indelukket feel. 9
reflektioner over min læring Hvad har jeg lært under forløbet? HTML-delen er den del af dette projekt, jeg har lært aller mest i. Jeg har lært, at kode min side meget bedre og flottere, og er blevet meget mere effektiv og hurtig i kodningen. Jeg kan mærke at det sætter sig bedre og bedre fast. Det bliver lettere at huske de forskellige tags, når man sidder og gør det selv og så meget. Derudover er jeg også blevet bedre til at bruge Illustrator, Photoshop og InDesign, da jeg har brugt disse programmer utroligt meget. Hvordan hænger det sammen med mit forhåndskendskab til emnet og denne opgavetype? Når man tænker på, at jeg ikke rigtig vidste, hvad en multimediedesigner lavede, før jeg begyndte på uddannelsen, synes jeg, at jeg er nået utroligt langt på meget kort tid. Jeg tror det har noget at gøre med den måde, vi bliver undervist på med meget praktisk arbejde i stedet for, at vi kun sidder med næsen dybt begravet i bøger hele tiden. Vi får lov til at være kreative og bestemmer meget selv. Hvad forventede jeg at lære? Jeg forventede, at blive bedre i HTML/CSS, og det synes jeg også jeg er blevet. Og det er med alt det, der hører til som SEO, design og overblik. Hvad har jeg mere brug for at lære? Selvom jeg har lært meget i HTML/CSS, kan man altid lære mere. Jeg synes vi mangler at lære, hvordan man kan designe en side, og få den til at virke i Internet Explorer, da det altid er synderen, der er på tværs. Hvad vil jeg foretage mig for at komme til at lære dette? Jeg har allerede været på nettet at søge meget rundt efter løsninger, men der er utrolig mange forskellige forslag og de fleste af dem, jeg har fundet, virker ikke. Så jeg håber, at det er noget vi skal have mere om i skolen. 10