Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor. Projektarbete Solveig Betnér

Transkript

1 Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor Projektarbete Solveig Betnér

2 Innehållsförteckning Syfte s. 3 Målgrupp s. 3 Genre s. 3 Funktionalitet s. 4 Prototyper s. 5 Layout och grafisk form s. 9 Användarvänlighet s. 12 Sammanfattning av delar ur webstyleguide.com s. 13 Litteraturlista s. 15 2

3 Syfte Beställare 1: Irmapop Discjockeyn Irmapop spelar musik på olika tillställningar. Hon har haft spelningar i sin hemstad och målet är att sprida sig geografiskt. En webbplats behövs i marknadsföringssyfte. Beställare 2: Solveig Företaget Solveig designar, syr och trycker t-shirts och väskor. Försäljningen sker på konsthantverksmarknader och några få butiker. Hon vill ha försäljning via Internet för att nå fler. Målgrupp Jag följer till viss del Bergströms (2007, s ) beskrivning av hur målgrupp bestämms. Jag utgick också från egna erfarenheter. Det mest personliga är ofta det mest allmängiltiga! (Bergström 2007, s. 58). Irmapop Privatpersoner och företag besöker Irmapops webbplats. Målgruppen är människor som vill boka glad och dansant musik eller höra Irmapop spela. Åldersmässigt handlar det om år för privatpersoner men även äldre när det gäller företag. Solveig Målgruppen är män och kvinnor, år med intresse för hantverk. Gruppen vill ha unika accessoarer eller kläder. Genre Irmapop Detta är en företagssajt. Det blir inte problem att tillmötesgå olika typer av besökare (Van Duyne, Landay, & Hong 2006 s. 167) eftersom sajten är liten. Kontaktuppgifter hör till högsta prioritering så att bokning kan ske. Kontaktuppgifterna ska därför synas direkt (Van Duyne, Landay, & Hong 2006 s. 168). Solveig Detta är en e-handelssajt. Nu i den enklaste formen men kan expanderas vid behov (Van Duyne, Landay, & Hong 2006 s. 120). Den har också en del av genren företagsajt eftersom det ger trovärdighet att få veta vad som står bakom e-handeln (Van Duyne, Landay, & Hong 2006 s. 169). 3

4 Funktionalitet Utifrån målgruppens erfarenheter görs en lista över de krav och funktioner som bör finnas 1. Här är kravspecifikationer för webbplatserna jag jobbar med. Irmapop Solveig Tid och resurser påverkar prioriteringen. Jag hinner med kraven med prioriteringsgrad 1 tills 29 oktober. 1 Pieta Eklund, föreläsning om användbarhet, tillgänglighet, prototyping och användartester, oktober

5 Prototyper Tre underlag görs för prototypen. Sitemap, storyboard och schematics. 2 Jag gör först schematics och använder de som grund för storyboarden. Irmapop: Sitemaps, Schematic och Storyborad 2 Pieta Eklund, föreläsning om användbarhet, tillgänglighet, prototyping och användartester, oktober

6 Storyboarden kompletterad med en historia 3 : Stina behöver dj till sin nattklubb. En bekant tipsade om Irmapop. Stina surfar in på webbplatsen, läser informationen på startsidan men vill veta mer om musiken så klickar på länken musiken. Hon kollar under länken spelningar. Jag vill boka, tänker Stina och antar att det är rätt att klicka på kontakt. 3 Pieta Eklund, föreläsning om användbarhet, tillgänglighet, prototyping och användartester, oktober

7 Solveig: Sitemaps, Schematic och Storyborad 7

8 Prototyper4 Till grund för prototyperna är en teckning av elementen som finns på webbplatsernas alla sidor. Länkarna till Irmapop är urklippta i papper så de kan flyttas om beroende på vilken sida man är på. Samma sak med huvudinformationen som placeras i mittenrutan och bilderna som varierar på Solveigs sajt. Prototyperna är lätta att överblicka och navigationen är okomplicerad. Irmapop: prototyp Solveig: prototyp 4 Pieta Eklund, föreläsning om användbarhet, tillgänglighet, prototyping och användartester, oktober

9 Layout och grafisk form Företagens identitet syns direkt på startsidan (Van Duyne, Landay, & Hong 2006 s. 268). Irmapop visar vilken typ musik hon spelar och Solveig har en text som beskriver produkterna samt bilder som visar stilen. Webbplatserna visar också direkt det som är viktigtast (Van Duyne, Landay, & Hong 2006 s. 641). Slutenhetens lag är tillämpad i båda fallen. Informationen är inramad i en container för att ge webbplatserna tydlig struktur (Bergström 2007, s. 231). Irmapop Stödlinjer ritas med utgångspunkt från gyllene snittet. Det sägs ha det mest harmoniska förhållandet mellan längd och bredd (Bergström 2007, s.178). Den övre bilden visar en skiss över startsidan och den undre hur de underliggande sidorna skulle kunna se ut. Efter påbörjat arbetet med layouten i datorn kände jag att 9

10 illustrationen i vänstra hörnet blev för mycket och jag ville få med mer information direkt på startsidan. En ny layoutskiss: De två gula elementen visar exempel på likhetens lag som hjälper mottagaren att hitta (Bergström 2007, s. 231). Solveig Jag vill ge besökaren känslan av form och design. Ett klassiskt konstverk fick vara inspiration. Det gula och blå kompletterar varandra. Med starka svarta linjer runt viktiga element lyfts de fram från den vita bakgrunden (Van Duyne, Landay, & Hong 2006 s. 642). På Solveigs sajt syns likhetens lag. Den röda formen i logotypen har även placerats i nedre högra hörnet. Mycket vita områden gör att det känns luftigt och uppmärksamheten dras till rätt ställen (Lynch, Horton 2009, kapitel 7). 10

11 Färger Irmapop Irmapops färgschema är triadiskt 5, bortsett från det vita. Svarta konturer samt en del spetsiga former kompletterar mjuka färger. Dessa positiva färger symboliserar ofta glädje 6 vilket passar ändamålet. Solveig Färger hämtade från Mondrians konstverk. 5 Rebecca Landmér, föreläsning om design och färg, oktober Helena Jansson, föreläsning om färg, september

12 Användarvänlighet Detta hör ihop med målgrupp, funktionalitet och layout. Även tillgänglighet för funktionshindrade hör hit. Att viktigt innehåll kontrasterar mot bakgrunden är ett plus för de som har svårt att se färger. Bilder är märkta med beskrivande text för de som inte ser. Textstorlek är satt i måttet em för att förstorningen ska fungera bra. Endast lite javascript har använts för att inte komplicera för de som ej installerat det. Alternativ bör erbjudas annars. 12

13 Sammanfattning av delar ur webstyleguide.com 1. Process: Initial planning Testa webbdesignen på användare för att möta deras behov. Två, tre mål bör utgöra grunden för webbdesignen. Dessa bör innehålla strategier för webbplatsens form och hur framgången utvärderas. Ta hjälp av webbserverloggarna från servern som är värd för webbplatsen för att ha koll på sajtens aktivitet. I arbetslag finns olika erfarenheter. En gemensam plan för designen kan tas fram genom att dela med sig av synpunkter om redan befintliga webbplatser. Innan sajten börjar byggas bör behoven beskrivas för att definiera krav på innehållet. Klienten har ansvar över det innehåll som ska finnas på webbplatsen och bör vara medveten om det för att tidsplan och budget ska fungera. 4. Interface design: Interface design Oftast ser man inte hela webbplatsen på hemsidan. Man behöver oftast bläddra eller klicka sig vidare. Användaren ska kunna överblicka hur mycket information det rör sig om. Det ska vara lätt att orientera sig. Om webbplatsen har många länkar är det bra med kategorier som presenterar länkar istället för att alla visas direkt. Använd inga okända metaforer i gränssnittet. Användaren ska känna igen sig. Enhetlig design följer alla webbplatsens sidor för igenkännlighet, t.ex. en lista med länkar på samma plats och samma färger används. Använd gärna ett gränssnitt som många webbplatser har. En webbplats bör laddas snabbt. Många tröttnar annars. Det finns verktyg som kontrollerar hur snabb uppkoppling dina användare har. 7. Page design: Visual design Viktiga syften med grafisk design är att ge en överblick över elementens prioritet, definiera olika delar och att visa struktur. Element ska inte placeras trångt. En webbplats med väl uppdelat innehåll ger ett välorganiserat intryck. Vita ytor är också viktiga. Ögat följer en webbplats innehåll efter elementens placering. Balans ska finnas mellan visuell upplevelse och organiseringen. Färg och kontrast påverkar också användbarheten. 7 Page Design: Sidebar: Visual Design Principles Gestaltpsykologer har kommit fram till principer som utgör grunden för design. Dessa är de viktigaste för webbdesign: Närhet: En relation uppfattas mellan närliggande element. Likhet: Liknande objekt förknippas med varandra. Kontinuitet: Vi följer linjer och konturer med ögat. Helhet: Vi kan se hela figurer även om det fattas delar. Relationer mellan element i en bild gör att vi ser dem på olika sätt. Det beror t.ex. på formernas utseende, färger och storlek. Ett känt exempel är Rubins vas som kan ses både som en vas och två ansikten. 13

14 8 Typography: Legibility När text ska placeras på en webbplats, tänk på vilka mönster och kontraster som bildas. Text och grafik organiseras så att läsbarheten fungerar. Vita utrymmen är viktiga för luftighet och att separera textdelar från övriga element. Text kan justeras åt vänster, höger eller mot mitten. Mest läsbara är webbsidor med vänsterjusterad text. Textrader på webben ska inte vara lika långa som i tryckta medier. Då blir det för långt för ögat att ta sig tillbaks till vänstermarginalen. Vid fast bredd på layouten ska textraden vara högst 365 pixlar. Radavståndet i text för webb bör större än rekommendationerna för tryck text som är två procent över storleken på typsnittet. För att dela upp textstycken kan man göra indrag eller sätta botten-marginalen så att det blir en blankrad i mellan stycken. Blankrad gör det lättare för besökaren att överblicka texten. 11 Graphics: Imaging Strategies Fotografier blir bäst om de komprimeras som jpeg-format. Formatet stödjer 24- bitsfärger och laddas snabbt. Komplexa diagram och illustrationer bör produceras i vektorgrafiska program. Detta p.g.a. att förändring och skapande är enklare och kvalitet förändras inte när storleken ändras. När dessa bilder ska till webben bör de konverteras till png eller gif. Gif är det bildformat som stöds mest på webben. 14

15 Litteraturlista Bergström, B. (2007). Effektiv visuell kommunikation. Stockholm: Carlssons. Duyne, Douglas K. van, Landay, James A. & Hong, Jason I. (2006). The design of sites: patterns for creating winning web sites. 2. ed. Harlow: Prentice Hall Lynch, Patrick J. & Horton, Sarah (2009). Web Style Guide. 3. ed. 15