FAKTA 3 INDLEDNING 4 KREATIV PROCES 4 INDLEDENDE FASE 4 DESIGNVALG 6 TYPOGRAFI 6 FARVER 6 LOGO 6 BRUGERGRÆNSEFLADE 6 BAGVEDLIGGENDE KODE 7

Transkript

1

2 FAKTA 3 INDLEDNING 4 KREATIV PROCES 4 INDLEDENDE FASE 4 DESIGNVALG 6 TYPOGRAFI 6 FARVER 6 LOGO 6 BRUGERGRÆNSEFLADE 6 BAGVEDLIGGENDE KODE 7 EKSPERTVURDERING 10 REDESIGN AF PROJEKTER 12 BANNERPROJEKT 12 SØREN K REDESIGN 12 EVALUERING 13 KILDER 14 2

3 FAKTA Titel: "Weblabs" (Eksamensprojekt 1. semester) URL: Navn: Morten Møller Nielsen (CPH-MN17) Hold: Cl12mul1b12e Undervisere: Ditlev Skanderby, Frederik Tang, Jesper Hinchely, Merete Lindemann, Morten Rold, Thomas Hartmann Underskrift: Morten Møller Nielsen 3

4 INDLEDNING I denne afsluttende opgave på 1. semester har jeg redesignet mit portfolie fra bunden og opdateret de opgaver, jeg har lavet. Projektet har til formål at "...at præsentere og dokumentere dit faglige niveau og vise din faglige udvikling samt gøre dig bevidst om, hvad du har arbejdet med, og hvad du har lært". Mine læringsmål for dette projekt har derfor været: 1. At redesigne mit gamle portfolie og kode det helt fra bunden 2. At opdatere mine tidligere projekter 3. At gøre brug af den teoretiske viden jeg har tilegnet mig på 1. semester og dokumentere den læringsproces, jeg har været igennem 4. At optimere mit site til søgemaskiner 5. At bygge videre på mine erfaringer med HTML og benytte de muligheder CSS3 åbner op for 6. At lave alternative designs og derved optimere mit site til mobile enheder KREATIV PROCES Indledende fase I opgavens indledende fase, gjorde jeg mig en lang række tanker om, hvordan mit produkt skulle udformes. Hvordan skulle mit portfolie præsenteres og hvad skulle være titlen på mit site/domæne? Jeg kiggede først på andre designeres portfolier på nettet for at søge inspiration (bl.a. på og det sociale netværk "Pinterest"). De indtryk jeg fik her blandet med egne idéer, satte gang i en brainstorm og jeg begyndte at lave de første mock-ups på papir: 4

5 Jeg havde forskellige arbejdstitler på til mit projekt. men endte med at kalde mit portfolie for "Weblabs". Her er et par tidlige logoudkast: 5

6 DESIGNVALG Typografi Hovedoverskrifterne på de forskellige sider er fonten "Helvetica Neue Light". Samme font er brugt i menuerne. Denne sans-serif font står i kontrast til brødteksten, som er serif fonten "Georgia". For at bedre læseligheden har sidstnævnte en "letter-spacing" på 1px. Mindre afsnit har "Georgia", skrevet i "caps", som overskrift. Farver De overordnede farver på siden er holdt indenfor gråtoneskalaen. Overskrifter og links står sammen med sidens forskellige billeder i kontrast hertil. Brødteksten er ikke helt hvid, men derimod en meget lys grå. Dette bevirker at farven fremstår "blødere" på skærmen og bliver lettere at læse. Logo "Weblabs"-logoet er designet i "Illustrator" med udgangspunkt i fonten "Gill Sans". Jeg har i mit arbejde gjort brug af princippet om "figurdannelse". Dele af W'et og A'et er derfor fjernet. Brugeren af sitet vil, grundet bogstavernes almene tilstedeværelse i vores samfund og hjernens evne til at danne figurer, selv "bygge" logoet færdigt. Brugergrænseflade Min intention med "Weblabs" var at lave en minimalistisk og brugervenligt site med et kreativt "twist". Selve navigationen på siden (top-menuen og links på undersiderne) er meget konventionel. En "hover" og "selected" effekt viser henholdsvis, hvor brugeren kan navigere hen, og hvilken side denne befinder sig på. Menuen under "portfolie" er mere speciel. Her vises som udgangspunkt bare et gråt kvadrat (som i øvrigt danner ramme for hele siden). Når brugeren "hover" over denne afsløres et "grid", som indikerer at kvadratet er inddelt i ni felter. Det felt 6

7 brugeren rammer afslører desuden en billede af og titel fra et af mine projekter. For at bevare "lukketheden" i kvadratet har jeg gjort billederne en smule gennemsigtige, så de ikke flyder sammen med den hvide baggrund. Som tidligere nævnt ville jeg gerne give mit site et "twist", hvilket blev denne menu. Der er selvfølgelig en risiko for at dette valg af menu kan gå ud over brugerens oplevelse af "usability" på siden (læs mere under afsnittet "Ekspertvurdering"). Desuden kan brugeren ende med at tro, at det eneste projekt, jeg har bedrevet, har været at tegne et gråt kvadrat. Jeg har valgt at bevare menuen, da den står i kontrast og er det eneste element på den pågældende side. Det er derfor forventeligt at de fleste brugere vil blive "draget" af den grå kasse og opdage menuen. Bagvedliggende kode I dette afsnit vil jeg gøre rede for dele af min kode for "Weblabs". Som skrevet under mine læringsmål ville jeg i dette projekt gøre brug af nogle af de muligheder CSS3 åbner op for. Derfor har jeg benyttet mig af "transitions" effekt i portfolie-menuen. Denne effekt gør det muligt at lave overgange/animationer i CSS uden brug af Flash eller Java. Her er et eksempel: #projekter a img { padding:0; margin:0; float:left; opacity:0.0; } #projekter a:hover img { opacity:0.4; -webkit-transition:opacity 0.5s ease-in-out; 7

8 } -moz-transition:opacity 0.5s ease-in-out; -o-transition:opacity 0.5s ease-in-out; Billeder i link-tags har i portfolie-menuen som udgangspunkt en "opacity" værdi på 0.0. De er altså helt gennemsigtige og kan ikke ses. Når musen "hover" henover kommer billederne, vha. ovenstående til syne. "Transition" værdierne "skruer" billederne op på en opacity værdi af 0.4. "0.5s ease-in-out" betyder at billedet tager et halvt sekund om at komme til syne og det samme for at forsvinde igen. Det er nødvendigt at skrive de forskellige prefixes "webkit", "moz" og "o", således effekten virker i henholdsvis Chrome/Safari, Firefox og Opera. Transitions virker endnu ikke i Explorer, som derfor viser siden uden. Disse effekter er helt udeladt af mine designs til tablet og mobil, da man ikke har en "curser" på touch enheder, som kan frembringe "hover" effekten. Som noget nyt skulle jeg optimere min side til søgemaskiner (SEO - Search Engine Optimization) for derigennem at forbedre mit sites placering i søgninger. Søgemaskiner (som f.eks. Google) sender robotter ("web-crawlers") ud, som scanner indholdet af sites. Den information robotterne finder er med til at påvirke, hvordan dit site rangeres. Jeg har derfor tilføjet følgende "metatags" til mine HTML siders head sektion: <meta name="description" content="weblabs Grafisk webdesign. Portfolio og kontaktoplysninger." /> <meta name="keywords" content="morten Møller, weblabs, portfolie, grafisk design, multimediedesigner, webdesign, design, grafisk arbejde, web, webudvikling, logo, københavn, kings of dark disco, when city sleeps, audiolax" /> <meta name="author" content="morten Møller" /> 8

9 Derudover har jeg tilføjet skrevet "keywords" i billedernes ALT atributter. Eksempel: <a href="portfolie.html"><img src="images/portfolie_thumb.png" alt="portfolie - grafisk design" />Portfolie (1. udgave)</a> Jeg har også været opmærksom på at skrive "keywords" i selve "body" teksten på min side. 9

10 EKSPERTVURDERING I forbindelse med mit arbejde med "Weblabs" foretog jeg en ekspertvurdering af mit site. Dette er "...en systematisk måde at gennemgå et website, hvor gennerelle retningslinjer indenfor usability bruges til at vurdere websites kvalitet i brugen". Denne slags brugertest har følgende karakteristikker: Test af brugbarhed i forhold til heuristikker - Retningslinjer, regler eller principper Middel ressourer - testen kræver ikke test-deltagere og forberedelse Test på eksisterende websites - samt retningslinjer til design og udvikling To slags eksperter: - Eksperter i forhold til webdesign og usability - Eksperter på det pågældende fagområde I praksis har ekspertvurderingen tre faser. Den første er en planlægnings- og briefingsdel, hvor udførelsen af testen bliver gennemgået for deltagerne, som også briefes om det websitet. I anden fase gennemgår de deltagende websitet individuelt og noterer de problemer de finder i brugen af sitet. Tredje fase er en diskussion eksperterne imellem om de fejl de hver især har fundet. Mit ekspertpanel bestod af tre personer (A, B og C), som på sigt kunne være potentielle kunder. Herunder er vores besvarelser samlet i et enkelt log-skema. Hvert problem er blevet tildelt en alvorsgrad fra 1-4, hvor 1 svarer til et kosmetisk problem 10

11 og 4 et katastrofalt (Gregersen, Ole & Wisler- Poulsen, Ian Kap. 7): Testpersoner: A, B og C Heuristik/ Designprincip: Navn & Nummer: Lokation: URL: Problem: Beskrivelse af brugerens problem: #5 Forhindre fejl weblabs.dk/illustrator.html Link til logofiler virker ikke #5 Forhindre fejl weblabs.dk/laering_bannerprojekt.h Link virker tml ikke #1 System status weblabs.dk/laering_portfolie.html Savner en "tilbage" knap #4 Konsistens og weblabs.dk/index.html Den grå standarder menu kan forvirre nogle Kategori: Løsning: 1-4 Forslag til løsning på problemet: 4 Ret URL 4 Ret URL 2 Lave "tilbage" links på undersider 2 Vise billeder og tekst i den grå box #4 Konsistens og weblabs.dk/index.html standarder #5 Forhindre fejl weblabs.dk/laering_bannerprojekt.h tml Brugeren kan tro der ikke er noget på siden 3 Vise billeder og tekst i den grå box Dødt link 4 Ret adressen #5 Forhindre fejl weblabs.dk/laering_bannerprojekt.h tml #8 Æstetisk og weblabs.dk/laering.html minimalistisk design Link er dødt 4 Ret URL Teksten 1 Lave virker meget spalter "massiv" Ovenstående log-skema gav mig en idé om nogle fejl og mangler på min side. Simple fejl, såsom døde links kunne jeg hurtigt rette. En testperson savnede muligheden for at "gå tilbage" på undersider, hvilket jeg tilføjede. 11

12 På min "læringsside" valgte jeg at dele teksten op i to spalter med små afsnit i kursiv, hvilket har skabt luft på siden. To testpersoner nævner det grå kvadrat, som udgør menuen under portfolie, som værende forvirrende. Jeg har valgt at beholde menuen, men har dog tilføjet et "grid" som opstår når man "hover" over kassen. Dette afslører at menuen er delt op i felter og var ikke en del af mit oprindelige design. REDESIGN AF PROJEKTER En del af eksamensopgaven har handlet om at justere i de opgaver, vi har lavet i løbet af 1. semester. Jeg har derfor været inde og kigge på både mit Bannerprojekt og redesignet af Søren K's hjemmeside. Bannerprojekt I dette projekt har jeg lavet om på det banner 3. Jeg har fjernet de røde gardiner derfra, da jeg syntes at farven faldt udenfor det samlede koncept. Derudover har jeg redigeret i baggrundsbilledet på min "landing-page" og trukket farve ud af det, da det "støjede" i forhold til det øvrige farvevalg på siden. Oprindeligt projekt: Opdateret: Søren K Redesign Her har jeg redigeret i logoet for restauranten. Jeg har fjernet ansigtet og gjort selve teksten større. Jeg har rykket siden lidt ned ved hjælp af noget margen i toppen. I menuen til højre har jeg lavet billederne til links (ligesom knapperne), og der er "hover" effekt på dem også. Derudover har jeg taget lidt farve ud af billederne til højre, da jeg syntes, de stjal fokus fra "hoved-siden" til venstre. På "kontakt" siden har jeg gjort kortet mindre og placeret det til venstre, således det ikke "clasher" med billederne i spalten til højre. 12

13 Oprindeligt projekt: Opdateret: EVALUERING Jeg synes, arbejdet med denne opgave er forløbet godt. I løbet af mit 1. semester har jeg rykket mig indenfor kodning og design af hjemmesider, hvilket jeg kunne mærke i denne arbejdsproces. Dette erfarede jeg også, da opdaterede mine gamle projekter. Desuden har jeg inddraget den teoretiske viden, jeg har tilegnet mig i løbet af mit første halve år på studiet. Dette har hjulpet mig til at strukturere min arbejdsproces og i argumentering for designvalg. 13

14 KILDER 20 Designprincipper. Wisler- Poulsen, Ian. 1. udgave, 1. oplag. Grafisk Litteratur Usability - Testmetoder til mere brugervenlige websites på internettet. Gregersen, Ole & Wisler- Poulsen, Ian. 1. udgave, 2. oplag. Grafisk Litteratur Slides fra Fronter