Disse har alle sammen hjulpet til at skabe min hjemmeside. Ved at give inspiration og få ideerne ned på papir, før de blev vist til omverdenen.

Transkript

1 Introduktion til webdesign Jeg har igennem webdesign projektet arbejdet med en masse forskellige processer, i alt 6 processer. Disse er skab moodboard fra en side, informationsdesign, navigationsdesign, wireframes, moodboard til portfolio og CSS. Disse har alle sammen hjulpet til at skabe min hjemmeside. Ved at give inspiration og få ideerne ned på papir, før de blev vist til omverdenen. Den første proces jeg arbejdede med, var moodboard af en hjemmeside. Dette var mit første møde med moodboard, som jeg lavere igen, senere i processen. Det næste er informationdesign, hvor jeg går ind og arbejder med Steve Krug s teorier. Så er der navigationsdesign, hvor jeg udvider sitemappet jeg har lavet i informationsdesign, til at vise navigations metoden. Det fjerde er wireframes, hvor jeg har optegnet alle delene, så der kommer dimensioner på og hvad elementerne i de forskellige side gør. Det femte er moodboard til min portfolio, mine ideer og følelser omkring min portfolio ligger jeg på bordet med et moodboard. Det sidste er CSS, hvor jeg har stylet min portfolio. Præsentation og dokumentation af moodboard af en hjemmeside Dette moodboard er lavet ud fra Soundclouds hjemmeside. Meningen med moodboardet er at fremhæve enkelte dele af hjemmesidens som udgør designet. Dette kan være følelser, layout, ordnet og så videre. Til at starte med diskuterede jeg med Mikkel Dahlin omkring Spotify og Soundcloud. Vi fandt frem til at Soundcloud fokuseret på unge, men ikke bare unge der høre pop musik, men meget mere forskellige målgrupper inden for unge. Dette ses på forsiden og i deres unikke system, man ser straks vidt forskellige musik genre på forsiden. Selvom det er populært musik, er det populært musik af forskellige genre. Det andet er hvordan man kan lave fællesskaber på Souncloud, enhver person kan ligge sit eget musik op i forhold til spotify, hvor man skal spørge. Dette skaber unikke fællesskaber omkring unikke musik genre, dette hjælper på

2 at øge forskelligheden af brugere. Opsætningen og fonten er ordnet, smart og clean. I mit moodboard viser jeg Soundclouds dominerende farve, orange. Dette er deres primære og icon farve kan man sige, orange skal altså forbindes med Soundcloud. Derudover bliver der brugt hvid og grå, selvom hvid bliver brugt endnu mere er det ikke den man lægger mærke til, den er meget neutral og bruges til at man tydeligt ser det vigtige på siden. Grå er til kontrast med hvid og orange, grå bliver brugt på forsiden for at vise en ramme for de forskellige interaktive muligheder og selve hjemmesiden. Den orange farve symbolisere passion og glæde. Mit moodboard skulle altså vise de forskellige dele nævnt, det første var selvfølgelig Soundclouds farve orange, som bliver vist med bagrunden og farverne brugt i de forskellige billeder, hvor der altid er et skær af orange. Billedet øverst til venstre med skyen og fuglen skulle ikke bare repræsentere ordet Cloud, men i stedet repræsentere Soundclouds ide om at alt skal være åbent, at alle kan lægge musik op og at alle skal kunne finde musik lige præcis til dem. Der skal ingen grænser være. Nederst til venstre, med de glade mennesker skal vise diversitet i den unge målgruppe. Sammen med det orangeskær og smilene får man følelsen af glæde i moodboardet. I midten af moodboardet ser man #MusicForEveryone, dette er ikke så meget for at fortælle direkte, at det er musik for alle, selvom det gør det. Det viser i stedet hvilken font der bliver brugt på hjemmesiden, på moodboardet bliver der brugt en almindelig Arial font. Dette kan man også se bliver primært brugt på hjemmesiden, muligvis ikke den samme Arial, men har i hvert fald de unikke egenskaber, hvor l og t er cuttet specielt. Det mindste billede øverst er ment til at vise moderne design, når man ser billedet ved man det ikke er et gammelt maleri, men i stedet en grafisk design, der udstråler moderne design. Det øverste højre billede er af en musik kunstner og fortæller om hvad det handler om. Det samme bruges det nederste højre billede til, lyd bølgen og til sidst, men ikke mindst er der den nederst player, som selvfølgelig viser tydeligt designet af hjemmesiden, en primær funktion. Den er placeret i bunden ligesom på hjemmesiden og er ikke stor i forhold til resten, da det skal afspejle hjemmesiden. Litteratur - Hjemmesiden der blev brugt Dokumentation af informations design Omit needless words, er den 17 regel af E.B. White1, som Steve Krug fortæller er hans inspiration til hans tredje brugervenligheds lov. Hvad denne regel fortæller os er at man ikke skal bruge unødvendige ord i en sætning, ligesom man heller ikke skal bruge unødvendige linjer i en tegning. Omit needless words, bruger jeg i sitemappen. Det ses ved hvad jeg kalder mine opgaver, førhen ville jeg have kaldte jeg min opgave for Segmenterings opgave, men det er fuldstændig unødvendigt med ordet opgave. Det er det, fordi man ved at trykke på den allerede ved det er en opgave uden at få det at vide. I stedet kalder jeg den nu Segmentering.

3 Den første lov af Steve Krug er Don t Make Me Think, Dette handler om at læseren ikke skal tænke og lave spørgsmålstegn ved websiden. F.eks. ikke at have navigationsmenu i venstre side og så have et søgeværktøj nederst til højre, læseren skal ikke kunne stille spørgsmålet, hvor søger jeg henne? Jeg har tænkt mig at på Home/portfolio siden skal der være en navigation over 2.g s opgaver, 3.g s opgaver og teori. Som altid skal være der, selv hvis man går ind på en opgave, så skal man stadig se navigationen samme sted i venstreside. Navngivningen af opgaverne er her også vigtigt for ikke at få læseren til at stille spørgsmålstegn, f.eks. Segmenterings opgave, Segmentering og Segmenterings opgave er begge åbenlyse, men når det står sammen med de andre, som kan hedde Røg og damp projektet, ville læseren undrer sig over forskellen. Så her har jeg muligheden for at inddele dem yderligere i henholdsvis opgaver som er mindre og projekter som er store, eller fjerne det unødvendige ord, hvor det så vil gå overens med den tredjelov. Lige nu tror jeg, at jeg inddeler det i projekter og opgaver, ud fra om det er store eller små opgaver. En vigtig komponent i min website som kan se på sitemappen er min teori side det, der er meningen er at den skal forklare teorierne i faget og uddybe hvad der ikke er blevet uddybet i opgaverne, men det vigtigste er at den skal have forbindelse med alle opgaver og projekter. Så hvis der bliver skrevet om Steve Krug så vil der bliver henvist til stedet hvor man kan finde teorien. I dette tilfælde ville det så være den her opgave. Så Lærer og censor ville kunne gå ind på den og tjekke om jeg kan inkorporere teorien til min opgave hurtigt og have oversigt over hjemmesiden. Dette giver lærer/censor mulighed for at ikke behøves at stille spørgsmålet hvor finder jeg ud af om han kan bruge de teorier? Så ved hjælp af denne vil man kunne få lyn hurtig oversigt omkring teorien. Her ses mit informations sitemap design. Dette blev lavet da jeg kun var nået to processer ind i projektet, dette betyder at den ikke spejler sig af det endelig resultat, men den viser dog nogle af elementerne, hvordan jeg har tænkt mig at arbejde videre. Den næste proces arbejder videre med site-mappet og kan derfor kaldes en udvidet-sitemap, den forbedrede version.

4 Dette er den udvidet sitemap, som blev konstrueret i forbindelse med navigationsdesign, dette viser navigationen imellem elementerne og hvordan de virker med hinanden. Den viser dog ikke virkeligt tydeligt, men øverst til højre er der en tekst boks, hvor jeg har skrevet at ligemeget hvor man er, er der er en topmenu, som vil gøre at hele siden er forbundet. Stregerne på site mappet, hvis det skulle vises for en bedre forståelse, skulle der være streger fra hvert element til alle andre osv., men jeg tænker det er til at forstå.

5 Wireframe Ved wireframe ser positionerne af mine elementer, men da dette ikke er lavet efter CSS, afspejler det kun med nogle elementer, f.eks. er top-menuen fra den ene side til den anden. Jeg har besluttet mig for ikke at tage billeder med, da jeg fandt dem unødvendig. Positionen af elementerne i min top-menu har også ændret sig i den endelig version. Den viser dog sådan nogenlunde hvor de forskellige elementer skulle være, dens primære mål var at arbejde ud fra min wireframe, mens jeg arbejdede med CSS, hvilket jeg har gjort. Jeg har dog ændret på ting jeg syntes kunne være bedre, end det, det er på wireframe papiret. Moodboard til portfolio Inden jeg begynder på CSS, skal jeg få ideerne til designet, så ved at researche og få inspiration fra store hjemmesider, så som facebook, twitter osv. Kom jeg frem til mit moodboard, den skal være med til at vise udtrykket i min hjemmeside, hvilket jeg syntes den gør, når man ser på det endelige resultat. Jeg har brugt de farver som ses på moodboardet, de er ikke kraftige farver og derfor gode mod øjnene. Helvetica bruger jeg, da det er en font som alle browser næsten har og så som backup, hvis de ikke har vil de få en anden af sans-serif. Moodboard til portfolio Boksene er med til at vise hvordan jeg vil have konstruktionen af hjemmesiden, der skal ingen bløde kanter være. Dette giver et mere simpelt look til min hjemmeside, dette syntes jeg passer godt til farvene og at det

6 er en portfolio, da det er information der skal gives ud. Firkanter fortæller at det er rå information man vil få ud af siden, i forhold til rundede former som vil være mere opinion så som blogging sider. CSS Jeg har konstrueret min web-site med HTML og CSS, ingen andre. Dette betyder at det er en mindre kompliceret side. Metoden jeg har anvendt CSS med, er external, det vil sige et CSS dokument ved siden af min HTML, som derfor kan bruges til at styre hele hjemmesiden. Resultatet kan ses på min portfolio.