Johan Bjarne Salo EN WEBBSIDAS DESIGNPROCESS OCH ANVÄNDBARHET

Storlek: px
Starta visningen från sidan:

Download "Johan Bjarne Salo EN WEBBSIDAS DESIGNPROCESS OCH ANVÄNDBARHET"

Transkript

1 Johan Bjarne Salo EN WEBBSIDAS DESIGNPROCESS OCH ANVÄNDBARHET Informationsbehandling 2010

2 2 FÖRORD Detta lärdomsprov har skrivits under hösten 2010 i syfte att erhålla tradenomexamen inom utbildningsprogrammet för informationsbehandling vid Vasa yrkeshögskola. Erik Wahlman har fungerat som handledare. Vasa 7 november 2010 Johan Salo

3 3 VASA YRKESHÖGSKOLA Utbildningsprogrammet för informationsbehandling ABSTRAKT Författare Johan Salo Lärdomsprovets titel En webbsidas designprocess och användbarhet År 2010 Språk Sidantal Handledare svenska bilagor Erik Wahlman Syftet med detta arbete var att skapa en ny webbdesign åt en kampsportsförening i Karleby, MMA Kokkola, och ge idéer och riktlinjer för nya och erfarna webbdesigners projekt. Webbsidors utseende och funktionalitet har allt större betydelse i dagens läge. Detta arbete innehåller en designprocess för en webbsida, hur man strävar efter god användbarhet samt en genomgång av skapandet av MMA Kokkolas webbdesign. Litteratur om webbsidor, webbdesign, grafisk design och internet har varit de primära informationskällorna för arbetet. Resultatet av detta arbete var en guide för webbdesigners och en ny användbar webbdesign skapades som skall göra det lättare att identifiera föreningen MMA Kokkola. Webbdesignen är redo att bearbetas och tas i bruk. Ämnesord Webbdesign, Användbarhet, Riktlinjer, Guide

4 4 VAASAN AMMATTIKORKEAKOULU UNIVERSITY OF APPLIED SCIENCES Utbildningsprogrammet för informationsbehandling ABSTRACT Author Title Year 2010 Language Pages Name of Supervisor Johan Salo A websites design process and usability Swedish appendices Erik Wahlman The aim of this thesis was to create a new web design for a mixed martial arts club in Kokkola, MMA Kokkola, and provide guidelines and ideas for the web designer s own projects. The appearance of a website and its functionality has become increasingly important. The thesis work contains a design process for a website, an examination of how good usability can be reached and a review of the creation of MMA Kokkola s web design. Literature on web pages, web design, graphic design and the internet have been the primary data sources for the work. The outcome of this thesis was a guide for new web designers. A new and usable web design was created for MMA Kokkola that is ready to be processed and after which it will be ready for use. Keywords Web design, Usability, Guidelines, Guide

5 5 INNEHÅLL FÖRORD... 2 ABSTRAKT... 3 ABSTRACT INLEDNING Inledande information Orsaken till att MMA Kokkolas webbdesign skapades FÄRGLÄRA Ögat och färger RGB CMYK Färgerna på bildskärmen DIGITALA BILDER Pixlar GIF JPEG INNAN MAN BÖRJAR DESIGNA Målgruppen för webbsidan Val av program Skissa WEBBSIDANS ANVÄNDBARHET Användbar navigation Kvalitet av innehåll och texter Top tio användbarhetsproblem Undvik följande fem saker på din webbsida... 23

6 6 6 EN WEBBSIDAS LAYOUT Hur en besökare ser på en webbsida Olika element och innehåll i en layout Olika typer av layouts Navigeringsfältet Användning av grafik SKAPANDET AV MMA KOKKOLAS WEBBDESIGN Varför en ny webbdesign? Var skall man börja? Idéer för webbdesignen Skapandet av webbsidans delar i Photoshop Presentation av webbsidans innehåll SLUTLEDNING KÄLLOR BILAGOR... 42

7 7 1 INLEDNING 1.1 Inledande information I dagens läge hör datorer, internet och besök på olika webbsidor till vardagen för största delen av befolkningen. Med detta följer allt högre krav på webbsidornas funktionalitet och utseende. Idén för detta lärdomsprov fick jag via MMA Kokkola, en kampsportsförening i Karleby som hade ett stort behov av att få föreningens webbsida uppdaterad och fram till allmänheten. Syftet med detta lärdomsprov är att ge ideer för nya webbdesigners i rätt riktning. Det finns flera fallgropar och faktorer man inte är medveten om. Genom att läsa böcker om webbdesign, layouter, grafik på webben och genom att studera professionella webbdesigners artiklar och råd har de bästa bitarna valts ut. Lärdomsprovet kommer att behandla en designprocess för en webbsida, användbarhet, grunderna för färgläran, hur digitala bilder skall användas på en webbsida, samt en genomgång av skapandet av webbsidan för MMA Kokkola för att ge en blick av designprocessen i sin helhet. Det finns flera riktlinjer för att nå den bästa användbarheten på en webbsida och de bästa behandlas i detta arbete. Tyngdpunkten ligger i användbarheten och själva layouten för en webbsida. En webbsida med god användbarhet gör att en besökare snabbt, effektivt och lätt kan komma in på webbsidan utan att lägga extra tid på att fundera hur den fungerar och hur man kommer åt rätta rubriker och sidor. Som ett första projekt åt MMA Kokkola skapades ett informationsblad för Kokkola Fight II, ett evenemang med amatör- och professionella matcher. Informationsbladets design blev mycket väl mottaget av projektbeställarna samt av publiken och denna design inarbetades även på webbsidan. Det andra projektet som gjordes i samarbete med föreningen var skapandet av en ny logo. 1.2 Orsaken till att MMA Kokkolas webbdesign skapades En fint designad webbsida med bra användbarhet blir ihågkommen av besökare. Den nuvarande webbsidan som MMA Kokkola har på nätet är ganska enkel och

8 8 tråkig. Med denna webbdesign vill jag ge en boost åt MMA Kokkolas image och nå allmänheten bättre. Genom att göra reklam om den nya webbsidan kan man locka nya besökare och även nya elever till grundkursen. Den nya webbdesignen skall tas i bruk i en nära framtid då detta lärdomsprov är färdigt.

9 9 2 FÄRGLÄRA Det är viktigt att ha en uppfattning om färgers betydelse och inverkan inom grafisk design. Det är ett krävande område att få färger att fungera med varandra och kunna skapa en enhetlig webbsida. En besökare på webbsidan måste klart och tydligt se vilka färger som är länkar, var det viktigaste innehållet finns och veta var man befinner sig i navigationen med hjälp av färger och nyanser. 2.1 Ögat och färger I grafisk webbdesign är det centrala att hålla färgerna enkla och inte överdriva med för många olika nyanser och färger. Individen ser färger på olika sätt. Vi skall inte heller glömma den del av befolkningen som är färgblinda (ca 8 % av männen och 1 % av kvinnorna). Därför är det alltid bra att testa att en webbsidas meny även fungerar i gråskala. På ögats näthinna finns så kallade stavar och tappar som registrerar ljus. Stavarnas uppgift är att skilja åt ljusets intensitet medan tapparna är känsliga för kulörer. Tapparna består av tre olika typer, en för röda, en för gröna och en för blåa. Med hjälp av dessa tre typer av tappar kan vi uppfatta olika kulörer. RGB-systemet skapar kulörer genom att blanda ljus av de tre olika ljuskällor. [2] På webbsidor kan färger utnyttjas på flera olika sätt. De kan leda ögat till rätt ställe, öka förståelsen för hur olika objekt och element hör ihop och på detta sätt kommer besökaren även bättre ihåg webbsidan. Om en layout består av ett ljusare område eller bild på en för övrigt mörk layout, kommer detta område snabbast att få besökarens uppmärksamhet. 2.2 RGB I datavärlden brukar man kalla additiv färg för RGB eftersom den består av de tre grundfärgerna rött, grönt och blått. Digitala bilder behandlas oftast i RGBfärgläge. I datorn anges skalan mellan 0 och 255 för var färg i RGB. Det finns alltså 256 x 256 x 256 = ca 16,7 miljoner olika kulörblandningar. Om alla

10 10 ljuskällor är tända, det vill säga ställda in på 255, betyder det att vi upplever det som vitt. Om alla ljuskällorna är släckta, det vill säga på 0, blir det omvänt och svart. Bild 1 visar hur det additiva kulörsystemets primärkulörer och dess blandningar. [2] Bild 1 RGB kulörers blandningar 2.3 CMYK Subtraktiv färg eller CMYK består av Cyan, Magenta, Gult och Svart (Cyan, Magenta, Yellow och Black, K eftersom att B redan är upptaget av beteckningen blått). Denna beteckning kommer från tryckerivärlden eftersom de är de fyra färgerna som vanligtvis används som så kallade tryckfärger. På dataskärmen ser man CMYK även som additiva eller som RGB-färger. Färgbilder som skall tryckas måste konverteras från RGB-systemet till CMYK-systemet. Bild 2 visar CMYK kulörerna. [2] Bild 2 CMYK kulörers blandningar

11 Färgerna på bildskärmen Det finns flera olika typer av hårdvara och mjukvara för datorer. Det betyder att egentligen ingen skärm eller dator är exakt lik en annan och här finner vi mer eller mindre problem med webbdesign och färganvändning. Man bör analysera vilka färger som fungerar på din webbsida och om de faktiskt ser bra ut på bildskärmen i slutprodukten. En del färger fungerar inte bredvid varandra, eftersom gränsen mellan färgerna ser ut som att den skulle vibrera. Till dessa färger hör bland annat rött/grön, blått/violett och rött/blått. Om man ändå vill använda de nämnda färgerna tillsamman bör man addera en svart linje mellan exempelvis den röda och gröna färgen som reducerar vibreringen. [1]

12 12 3 DIGITALA BILDER De flesta webbsidor är både text- och bildbaserade. Webbsidorna innehåller grafik och till den grafiska delen ingår vanligen digitala bilder. Man bör känna till hur man kan behandla bilderna, vilka filformat det lönar sig att använda, när man skall komprimera bilder och själva läran om pixlar och hur dessa ser ut på skärmen. De vanligaste filformaten som används på webbsidor är GIF och JPEG, eftersom alla webbläsare klarar av att läsa dessa. Ifall man använder bilder fel, det vill säga fel storlek, för många eller stora bilder på en webbsida lider uppladdningstiden och då tappar besökaren lätt intresset. Ju snabbare man får fram en webbsida, desto bättre. I vissa fall är man mer eller mindre tvungen att ha bilder med större filstorlek, till exempel en portfolio gjord av en fotograf på webben. Man kan lösa det genom att använda sig av flera thumbnails på webbsidan och genom att klicka på en av thumbnailsen öppnas bilden i orginalstorlek. Thumbnails är komprimerade bilder av den större orginalbilden och på detta sätt laddas webbsidan upp snabbare. Man har alltså en hel del att tänka på när det gäller digitala bilder på webben. Det lönar sig att reducera grafikens eller bildernas storlek så länge att inte kvaliteten lider för mycket. I dagens läge har största delen av befolkningen snabba uppkopplingar och rätt så bra datorer, men för minoriteten med långsammare uppkopplingar samt de som surfar med mobiltelefon krävs en webbsida som laddas upp relativt snabbt. 3.1 Pixlar Man bör känna till grunden om pixlar om man skall sätta ut bilder på webbsidor eller webben överlag. Order pixel kommer från engelskans PICture Element. Det finns två huvudtyper av pixelbaserade bilder, GIF och JPEG, vilka använder sig av olika komprimeringstekniker. Dessa behandlas noggrannare i följande rubriker. En pixelbaserad bild består av ett mönster av små fyrkanter, bild 3 visar ett förstorat område av MMA Kokkolas logo med dessa små fyrkanter.

13 13 Bild 3 Pixlar Varje punkt har en viss storlek och färg. Vilken storlek pixlarna är på en bild beror på upplösningen. Upplösningen anges till exempel 300x200, vilket betyder att bilden är 300 pixlar bred och 200 pixlar hög. Ju sämre upplösning desto mer pixlar syns. En bild med mindre pixlar kan ändå ofta fungera, det går att pröva sig fram till ett bra resultat. Man skall se upp med pixelbaserade bilder när man förminskar dem. En del pixlar försvinner när man förminskar en pixelbaserad bild och om man förminskar den för mycket kan bilden tappa sina proportioner. [3] En jämförelse på hur en mindre mängd pixlar kan användas är ett porträtt av en person som är målat med tjocka klumpar av färg. Det ser dåligt ut på nära håll och man kan inte urskilja konturerna, men på rätt avstånd ser man tydligt personens konturer. 3.2 GIF Graphics Interchange Format, GIF är en populär komprimeringsteknik på webben. Den ger möjlighet att skapa enkla animationer och den har en liten filstorlek. Detta filformat lönar sig inte att använda på allt grafiskt material eftersom den innehåller endast 256 färger. En vanlig digital bild blir oklar och grynig i GIF format och filstorleken blir lika stor som i en JPEG bild, om inte större. GIF är optimalt att använda på bland annat simpla ikoner, små animationer, knappar, punkter och logon med skarpa kanter och begränsat antal färger. [3]

14 JPEG Joint Photographic Experts Group, JPEG, är den komprimeringsteknik som främst används till digitala fotografier och bilder eftersom den stöder 16,7 miljoner färger. I jämförelse med GIF är JPEG en förstörande komprimeringsteknik. Med detta avses att när exempelvis en digital bild komprimeras till JPEG förloras en del av datan. Onödiga pixlar kastas bort och färger reduceras. Beroende på vilken inställning av kvalitet man använder, kommer människas öga att märka eller icke märka skillnaden på den reducerade kvaliteten. Om man skall komprimera ett originalfoto lönar det sig först att göra en ny kopia av originalet (bildfilen) och sedan komprimera det. De pixlar som kastas bort går inte att få tillbaka. [3]

15 15 4 INNAN MAN BÖRJAR DESIGNA Man skulle gärna bara helst ta tag i själva designen och omforma sina tankar till digital form med en gång, men så lätt är det inte ändå. Om man har ett företag eller en förening, som i detta fall MMA Kokkola som uppdragsgivare måste man för det första få reda på vilka krav och önskemål de har. Enligt önskemålen kan man sedan börja bestämma vilka färger som skall användas var, skissa upp en preliminär layout, tänka ut hur webbsidan skall se ut när man i stora drag vet sin målgrupp och till sist göra ett val av vilket program som skall användas för den grafiska designen. För att själv skapa grafik till en webbsida finns det diverse program man kan använda sig av, men det rekommenderas att prova på olika program och använda det som passar bäst för de egna behoven. Om man har erfarenhet av ett specifikt program, lönar det sig att fortsätta utveckla sina kunskaper i det programmet. 4.1 Målgruppen för webbsidan En webbsida kan byggas upp på många olika sätt beroende på målgruppen. En webbsida riktad till barn kan designas på ett visst sätt, en nyhetstidning på webben designas enklare och på ett annat sätt. Med frågeställningar får man bra reda på sin målgrupp. Vem försöker du nå med webbsidan? Hurudana personer förväntas besöka webbsidan? Är de nybörjare eller vana? Då man vet sin målgrupp kan man lättare skissa upp en webbsida och välja färger och layout. Vem är ordet i frågeställningen som avgör webbsidans innehåll. [3] Frågeställningarna och svaren för att skapa en webbsida för en kampsportsförening var följande: Vem är intresserade av kampsporter? Män till största del och kvinnor i åldern år. Vem kan delta i en grundkurs? Alla som är 15 år och äldre, inga krav av tidigare erfarenhet. Hurudana personer förväntas besöka hemsidan? Både nybörjare och mer erfarna eftersom det ordnas grundkurser och fortsättningskurser. Med frågeställningarna kom man till att besökarna högst antagligen är intresserade av kampsport och grafik, layout och temat planerades enligt det. Eftersom färgerna var tidigare överrenskommet i stora

16 drag, kunde man slå fast och skissa upp en layout samt planera hur grafiken kommer att se ut Val av program För grafisk design på webben finns det flera program och diverse mjukvara man kan använda sig av. För en ovan användare finns det lättare alternativ att skapa en egen logo, webbsida eller dylikt med hjälp av och genom att kombinera Microsoft Office programmen (Frontpage) eller Paint. Det populäraste verktyget för pixelbaserad grafik är Adobe Photoshop. En användare som vill ha hjälp till mer avancerade program kan använda sig av tutorials på nätet för Adobe Photoshop, Paint Shop Pro eller motsvarande program. Tutorials har anvisningar från början till slut och in i detalj hur man skall skapa olika grafiska objekt. Oftast är det nämnt i en tutorial om den är gjord för nybörjare eller mer avancerade användare. Det finns massor av olika tutorials; för webbdesign, webblayout, texteffekter, knappar, fotografieffekter och en hel del andra effekter. En av de populärare webbsidorna med tutorials är Om man själv vill göra alla menyer, knappar, bakgrunder och bilder skilt för sig rekommenderar jag Adobe Photoshop. Photoshop är ett mångsidigt program, ganska lätt att lära sig och med hjälp av Adobe Masters Collection (innehåller de branschledande verktygen för medieövergripande design) kan man kombinera Adobes andra grafiska program för att nå den önskade slutsatsen. 4.3 Skissa Som i flera olika branscher är det ofta lönsamt att skissa upp innan man påbörjar sitt projekt. Man ser i helhet hur det kommer att se ut, man kan få nya idéer och man kan få kundens godkännande redan i det skedet. Då man har en skiss att börja arbeta från är det lättare att förverkliga det hela. Layouten och hur de

17 grundläggande komponenterna är placerade på en webbsida är mycket viktiga både i skissen och i förverkligandet. 17

18 18 5 WEBBSIDANS ANVÄNDBARHET Webbdesign består inte enbart av den grafiska delen och fint utseende, man måste också sträva efter god användbarhet, fungerande webbsidor. Slår man upp användbarhet, är det något som går att använda eller medför någon nytta. Begreppet användbarhet definieras även av ISO-standarden (Internationella standardiseringsorganisationen) som den grad i vilken specifika användare kan använda en produkt för att uppnå ett specifikt mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt i ett givet sammanhang. [9] Ökad produktivitet är resultatet av god användbarhet. En användbar webbsida gör det möjligt för besökaren att snabbt, effektivt och lätt nå sitt mål utan att lägga extra tid på att fundera hur webbsidan fungerar komma åt rätta rubriker och rätta sidor. För att nå god användbarhet skall man veta vem användaren är eller kan vara. Ta reda på målgruppen i god tid och planera sedan hur man kan fånga upp denna målgrupp. Det kan vara nybörjare, erfarna användare, unga och gamla samt av olika kön. Alla har olika krav på en webbsida och för att öka på funktionaliteten och användbarheten är målet att hålla det enkelt och rikta webbsidan för din målgrupp. Man kan inte göra en webbsida som är tänkt för alla. En webbsida som till exempel är riktad åt 3-5 åringar tillfredsställer knappast en dataexpert. 5.1 Användbar navigation Det finns flera element på en webbsida, navigationen är ett av de viktigare. När man besöker en webbsida kommer man vanligen först till hemsidan. På hemsidan finner man den viktigaste informationen kortfattad, men utan ett navigationssystem vet användaren inte hur man skall ta sig vidare för att komma åt mer information. Det är inte alltid säkert att användaren kommer rakt in på hemsidan, utan kanske via en länk av en vän kommer man rakt till en undersida. Enligt webbanvändbarhetsexperten Jakob Nielsen skall ett bra navigationssystem svara på följande tre frågor: Var är jag? Var har jag varit och Vart kan jag gå?

19 19 För att börja med det är det avgörande att man förser webbsidan med ett navigeringsfält för att öka användbarheten. Det finns inga bestämmelser om hur man skall placera navigeringsfältet men vanligen är det uppe eller på vänstra sidan på webbsidan. Samma struktur på webbsidans navigeringsfält samt alla undersidor är nyckeln för att användaren skall veta att man befinner sig på samma webbsida, fastän man klickat sig vidare till andra rubriker eller öppnat en undersida. För att veta vart man kan gå och var man har varit skall länkar och knappar stå ut ur texten. Genom att använda olika färger skiljer man åt länkar och knappar från övriga objekt på webbsidan. Dessa element skall stå ut ur texten när man har klickat en gång och då länken byter färg indikerar man på att man redan har varit in på innehållet under länken. [10][4] Bild 4 är ett bra exempel på ett invecklat navigeringssystem som inte fyller standarderna för användbarhet. Sidan ser för övrigt bra ut, men när det kommer till navigeringen undrar man. Det står Navigate med liten font och liten pil till höger. Till höger finner man ägg staplade i en ställning. Hur kan man koppla ihop navigering med ägg? Det första jag gjorde var att jag klickade på Navigate - inget hände. Efter detta rörde jag muspilen över äggen och placerade pilen på ett ägg i taget. Med en animation förstorades vart ägg och på vänster sida uppstod en text. Hur kan man veta vilket ägg framför texten Meny, Reservation eller Recept? Det går inte. Funktionaliteten för detta navigationssystem är dåligt. Med enklare lösningar har man vanligen mera nöjda besökare.

20 20 Bild 4 Dålig navigering, Genom att se på webbsidor med dålig användbarhet inser man hur viktig användbarheten är. Användaren kan tappa intresset om man inte inom några sekunder hittar det man vill. Inte ville jag röra muspilen över ägg som förstoras med en animation och se en text som uppstår vid sidan om. På webbsidor med liknande teknik måste man prova sig fram och testa hur navigationen egentligen fungerar, och det vill inte de flesta användarna. 5.2 Kvalitet av innehåll och texter En webbsida är inte bara design och utseende. Budskapet och innehållet har en avgörande roll i helheten. Enligt en undersökning som gjorts av webb användbarhetsexpert Jakob Nielsen tog det cirka tjugofem procent längre tid att läsa ett textblock online än att läsa samma text på en tryckt sida. Utav dessa studier kan man dra slutsatser att less is more när det gäller texter på hemsidor. Besökare på webbsidor har anpassat sig att skanna och skumläsa. Skanning betyder att en besökare kastar en blick (några sekunder) på webbsidan. Om inte

21 21 innehållet är relevant och intressant tappar användaren intresset redan i det skede. Ifall skanningen är tillräckligt intressant följer skumläsning av texten, det vill säga att besökaren inte läser texten ordagrannt men ändå uppfattar innehållet. Skumläsningen sker snabbt och avgör om man vill gå djupare in på ämnet. Innehållet är alltså en relevant del av en webbsida. Texterna skall placeras rätt på webbsidan och bestå av kortfattad viktig information samt bra uppdelning. Det är effektivare att läsa en bra uppdelad text än att all text kommer i ett. För att underlätta läsbarheten och besökarnas skumläsning skall orden och meningarna vara vettiga och grammatiken lättförståelig. [3][12] 5.3 Top tio användbarhetsproblem Det finns flera typiska brister på webbsidor som gör att användbarheten blir lidande. Som tidigare nämnts avses det med användbarhet att användaren skall snabbt, effektivt och lätt nå sitt mål. Om webbsidan laddas upp för långsamt har man redan ett problem, det skall gå snabbt. Genom att citera flera webbexperter på användbarhet och genom att söka upp de största användbarhetsproblemen med webbsidor avrundade jag denna lista till en top tio användbarhetsproblem: 1. Webbsidans syfte blir oklart. - Då man besöker en webbsida skall det klart och tydligt komma fram var man är och varför webbsidan existerar. 2. Laddningstiden blir för lång. - Ifall webbsidan har för många bilder och krävande grafik kan det ta länge att ladda upp sidan. 10 sekunder är maxtiden för att användaren skall behålla uppmärksamheten. 3. Navigeringsproblem, navigeringsfältet är svårt placerat eller består av för många länkar. - Navigeringsfältet eller menyn kan vara svår att hitta och svår att förstå. Håll beskrivningarna i menyn på 1-3 ord och sträva till att hålla navigationen enkel och lättförståelig. 4. Ful webbsida med dålig design.

22 22 - Ofta är webbsidor fula eftersom designern har använt tekniker som han inte har tillräckligt kunskap av. Man skall komma ihåg att även en enkel sida utan massor av grafik och intressant layout kan se bra ut. Besök för att se exempel på hur webbsidor inte skall se ut. 5. Svårt att läsa texter. - På grund av att färgen på texten är för nära bakgrundsfärgen eller på grund av för liten font kan det vara svårt att läsa texter. Undvik även för små fonter. 6. Svårt att hitta rätt. - Håll navigationen och strukturen enkel på webbsidan för att undvika problem. Var tydlig med vilka länkar som leder till toppsidor och vilka som går direkt till specifika innehållssidor. 7. Pop-ups för att presentera information. - Användare tycker inte om pop-up fönster när de vill läsa en text. Det tar sin tid att förstå vad som hände och back eller tillbaka knappen försvinner, vilket kan göra det svårare att komma tillbaka till föregående sida. 8. Animationer och blinkande text. - Ta bort animationer och blinkande text. 9. Fel ordval. - Använd klara och enkla ordval. En mening skall inte innehålla onödiga ord, en paragraf skall inte innehålla onödiga meningar, på samma sätt som en maskin inte skall ha onödiga delar. 10. En webbsidas objekt och innehåll på varandra. - Undvik faran för att en dropdown meny faller på andra objekt eller vice versa, bild 5 visar betydelsen av detta.

23 23 Bild 5 En webbsidas objekt på varandra Flera texter från dropdown menyn blir bakom bilden och användaren måste förstora webbläsarens fönster för att se allt. [6] 5.4 Undvik följande fem saker på din webbsida Eftersom det finns en hel del element som kan förstöra eller försämra en webbsida skall jag behandla dessa. Följande lista innehåller de fem viktigaste fallgropar man skall undvika: 1. Ljud - Som designer kan man inte veta vad en besökare lyssnar på eller gör när han eller hon besöker webbsidan. Förstör inte upplevelsen med onödig bakgrundsmusik eller coola ljudeffekter. Om du anser att det skall finnas musik eller ljudeffekter, sätt till volymkontroll eller en mute knapp. 2. Splashsidor - En splashsida är en första startsida som kommer fram före själva hemsidan. Dessa består vanligen av en välkomst text eller en klicka här för att besöka webbsidan text, lite information om vad webbsidan

24 24 innehåller och en fin bild eller motsvarande. Vem vill se det? Du besöker en webbsida för att se innehållet, inte en splashsida. 3. Överdrivet med reklam och banners - Flera webbsidor innehåller massor av banners och reklam. Detta tar bort blicken från det relevanta innehållet på webbsidan. En webbsida skapas för att nå besökare med ett specifikt innehåll, inte för att fyllas med banners och reklam. 4. Stor header bild - Det är populärt med stora headerbilder, men man bör begränsa det. Gå inte över 250 pixlar i höjd på headern. Det tar bort för mycket utrymme och tvingar det egentliga innehållet till bottnen av webbsidan. 5. Dead ends - Med dead ends på en webbsida menas att besökaren inte skall komma till sådana situationer där man inte kan trycka på tillbaka knappen. Ge alltid besökaren möjlighet att backa ett steg och därför bör man undvika pop-ups. Om man anser sig behöva pop-ups på webbsidan skall dessa vara rätt så små fönster och inte förvirra besökaren. Ange med klar text en knapp återvänd till webbsidan eller stäng fönstret.

25 25 6 EN WEBBSIDAS LAYOUT Att skapa webbdesign motsvarar ett pussel, man skall få bitarna att passa ihop för att se slutprodukten. På en webbsida är det lika viktigt att bitarna passar ihop. En layout är grunden för en webbsida, en av de viktigaste delarna i designprocessen. Layouten består vanligen av fyra eller fem olika element och de skall ställas upp i enlighet med hur en typisk besökare ser på en webbsida. Det är bra att använda sig av en layoutmall för både hemsidan och undersidorna för att webbsidan skall få ett enhetligt utseende. Försök att inte göra layouten för speciell jämfört med andra, de flesta användare är vana vid enkla layoutmallar både för att de fungerar bra och för att de är lätta att förstå. Under denna rubrik behandlas delarna och elementen för en layout skilt för sig. Som exempel använder jag MMA Kokkolas webbdesign och andra hemsidor som jämförelse 6.1 Hur en besökare ser på en webbsida Genom åren har det gjorts flera studier och undersökningar om hur användare ser på webbsidor. Resultaten av studierna och undersökningarna har lett till en utveckling av layouts för webbsidor. En användare följer vanligtvis ett mönster. Eyetrack III är en undersökning gjord 2004, i vilken det testades hur deltagarna ser på designen till olika nyhetshemsidor. Bild 6 visar resultatet på Eyetrack III studier hur ögonen fixerar sig på en webbsida och hur största delen av besökarna skannar igenom webbsidor. Bild 6 Hur en besökare ser igenom en hemsida

26 26 Ögonen fixerar sig först upp till vänster, oftast beroende på en större logo eller en bra header. Efter att ögat utforskat headern och innehållet på övre delen av webbsidan fixeras ögat mitten och nedre delen av webbsidan. Oftast undersöktes webbsidans nedre del, men inte alltid. Fotografierna eller bilderna fick inte mest uppmärksamhet på webbsidorna, texter och bra rubriker dominerade. Bild 7 är en grafisk bild baserad på studien av Eyetrack III, som visar de viktigaste områden att placera information och med hjälp av den kan man utveckla layouten. Bild 7 Områden att prioritera på en webbsida Eftersom deltagarna i studien först observerade övre delen av webbsidan från vänster till höger anses ett navigeringsfält fungera bäst placerat i övre delen av webbsidan. [7] Enligt en undersökning gjord av Jakob Nielsen år 2006 kom man till motsvarande resultat. Nielsen använde sig av en testgrupp på 232 personer. Man använde tusentals olika webbsidor för att få fram ett mönster som förekommer mest. Man kom fram till att deltagarna såg på största delen av webbsidorna i ett F-format mönster. Resultatet fick man genom att använda en webbkamera som fångade upp användarnas ansiktsuttryck samt infraröd-sändare och kameran i dataskärmen bakom små mörka fönster. Med hjälp av denna utrustning fick man framkallat en heatmap som visar hur ögonen har utforskat de hemsidor som ingick i testet, bild 8 visar de F formade mönstren på tre olika typer av webbsidor. [8]

Så skapas färgbilder i datorn

Så skapas färgbilder i datorn Så skapas färgbilder i datorn 31 I datorn skapas såväl text som bilder på skärmen av små fyrkantiga punkter, pixlar, som bygger upp bilden. Varje punkt har sin unika färg som erhålls genom blandning med

Läs mer

Bildredigering i EPiServer & Gimp

Bildredigering i EPiServer & Gimp Bildredigering i EPiServer & Gimp Maria Sognefors 7minds Agenda Teori om bilder Att tänka på när jag fotograferar Föra över bilder från kamera till dator Ladda upp bilder till EPiServer CMS 5 Enkel redigering

Läs mer

Föreläsning i webbdesign. Bilder och färger. Rune Körnefors. Medieteknik. 2012 Rune Körnefors rune.kornefors@lnu.se

Föreläsning i webbdesign. Bilder och färger. Rune Körnefors. Medieteknik. 2012 Rune Körnefors rune.kornefors@lnu.se Föreläsning i webbdesign Bilder och färger Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Exempel: Bilder på några webbsidor 2 Bildpunkt = pixel (picture element) Bilder (bitmap

Läs mer

Grundredigering i Photoshop Elements. Innehåll. Lennart Elg Grundredigering i Elements Version 2, uppdaterad 2012-09-14

Grundredigering i Photoshop Elements. Innehåll. Lennart Elg Grundredigering i Elements Version 2, uppdaterad 2012-09-14 Grundredigering i Photoshop Elements Denna artikel handlar om grundläggande fotoredigering i Elements: Att räta upp sneda horisonter och beskära bilden, och att justera exponering, färg och kontrast, så

Läs mer

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

Läs mer

Vilken version av Dreamweaver använder du?

Vilken version av Dreamweaver använder du? Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser

Läs mer

Färglära. Ljus är en blandning av färger som tillsammans upplevs som vitt. Färg är reflektion av ljus. I ett mörkt rum inga färger.

Färglära. Ljus är en blandning av färger som tillsammans upplevs som vitt. Färg är reflektion av ljus. I ett mörkt rum inga färger. Ljus är en blandning av färger som tillsammans upplevs som vitt. Färg är reflektion av ljus. I ett mörkt rum inga färger. Människans öga är känsligt för rött, grönt och blått ljus och det är kombinationer

Läs mer

Digital bildhantering

Digital bildhantering Digital bildhantering En analog bild blir digital när den scannas. Bilden delas upp i småbitar, fyrkanter, pixlar. En pixel = den digitala bildens minsta byggsten. Hur detaljrik bilden blir beror på upplösningen

Läs mer

1. Uppdateringsmodul (CMS)

1. Uppdateringsmodul (CMS) Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...

Läs mer

Manual för. 2.4 KALAS Sitemanager

Manual för. 2.4 KALAS Sitemanager Manual för 2.4 KALAS Sitemanager 1. Introduktion Den här manualen skall hjälpa dig att komma igång så att du själv på ett enkelt sätt kan lägga till, redigera eller ta bort webbsidor på din webbplats.

Läs mer

Bildhantering i OEW. Vi ska arbeta med följande bilder:

Bildhantering i OEW. Vi ska arbeta med följande bilder: Bildhantering i OEW Bilder på webben Bilder som man ser på olika hemsidor bör ha dessa egenskaper: 1 Klara färger 2 Skärpa 3 Snabbladdade 4 Rätt storlek för syftet Vi ska arbeta med följande bilder: Program

Läs mer

Manual för din hemsida

Manual för din hemsida Manual för din hemsida Dynamiska hemsidor är en lösning för att man på ett enkelt sätt skall kunna lägga till, ändra och ta bort sidor på sin hemsida. För att detta skall vara möjligt bygger lösningen

Läs mer

06. Skapa bildsegment

06. Skapa bildsegment 1/8 06. Skapa bildsegment Två mycket goda vänner, hunden Toya och katten Lisa. För att kunna länka från bilden till Toyas och Lisas egna hemsidor väljer vi att dela in bilden i segment. Till varje segment

Läs mer

12 Webb och kurshemsidor

12 Webb och kurshemsidor 12 Webb och kurshemsidor Många lärare använder sig av kurswebbsidor eller egna personliga webbsidor som ett ställe att samla information och dokumentation kring sitt arbete. Om du ska skapa en webbsida,

Läs mer

GUIDE FÖR POWERPOINT PRESENTATIONER MICROSOFT OFFICE, POWERPOINT 2007

GUIDE FÖR POWERPOINT PRESENTATIONER MICROSOFT OFFICE, POWERPOINT 2007 GUIDE FÖR POWERPOINT PRESENTATIONER MICROSOFT OFFICE, POWERPOINT 2007 Vänligen tänk på miljön före du skriver ut denna manual. Behöver du den på papper? Hannu Sääskilahti hannu.saaskilahti@hanken.fi ÖPPNA

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

IMS-manual för Netpub

IMS-manual för Netpub IMS-manual för Netpub * IMS = image management system = på klar och (nästan) redig svenska bildhanteringssystem för Svenska Yles webbpubliceringsverktyg Netpub Innehåll: Sidan: 1. För vem är manualen?

Läs mer

Regionala Cancercentrum Logotyp

Regionala Cancercentrum Logotyp Regionala Cancercentrum Logotyp Innehåll 1. LOGOTYPEN 3 1.1 Logotypen 4 1.2 Logotyp för fyrfärgstryck 5 1.3 Logotyp för Pantonetryck 6 1.4 Logotyp för webb 7 1.5 Logotyp för kontorsbruk 8 1.6 Logotypfärger

Läs mer

Manual HSB Webb brf 2004 03 23

Manual HSB Webb brf 2004 03 23 NYHETER Manual HSB Webb brf 2004 03 23 Nu kan man sätta en hemavdelning på ett arbetsflöde, så att det bara blir synligt från den avdelningen och nedåt i strukturen under en förening. Ett arbetsflöde blir

Läs mer

Analys av com hems startsida

Analys av com hems startsida IT-Universitetet Interaktionsdesign Grafiska gränssnitt, 6p Göteborg ht 2003 Analys av com hems startsida Björn Nord d00nord@dtek.chalmers.se 1. Innehållsförteckning 1. Innehållsförteckning... 2 2. Inledning...

Läs mer

Manual för visionutv.net Redigera

Manual för visionutv.net Redigera Manual för visionutv.net Redigera Version 2.0 Visionutveckling 2004 Innehåll: 1 Om Redigera 3 1.1 Bakgrund 3 1.2 Hur Redigera är uppbyggt 3 1.3 Vad är? 4 2 Inloggning 6 3 Nyheter i Redigera 2.0 7 3.1 Funktionsknappar

Läs mer

Välkommen till Flyerskola!

Välkommen till Flyerskola! Välkommen till Flyerskola! Flyerskola Var började det hela Tryckmetoder Teckensnitt Upplösning av bilder Vanligaste filformaten Program Underlätta arbetet för redaktören Att tänka på vid skapandet av en

Läs mer

Skapa en mall för inlämning av skriftliga uppgifter med hjälp av Microsoft Office Word

Skapa en mall för inlämning av skriftliga uppgifter med hjälp av Microsoft Office Word Skapa en mall för inlämning av skriftliga uppgifter med hjälp av Microsoft Office Word Enkel guide till ordbehandling med Word 2010 Medieteknik Södertörns högskola 2 september 2011 Du hittar vilka krav

Läs mer

Torstens Digitalbildguide

Torstens Digitalbildguide Thor Stone Education Torstens Digitalbildguide 1 Det finns två huvudtyper av digital bild, vektorbaserad och pixelbaserad. - Vektorbaserade bilder bygger på en matematisk formel och kan storlekförändras

Läs mer

SORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version 2012-09-28, rev 131101 1 (19)

SORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version 2012-09-28, rev 131101 1 (19) Handbok i OEW 28 sept 2012 Mari-Anne Englund Barbro Olofsson Sorsele kommun Version 2012-09-28, rev 131101 1 (19) Använd det användarnamn och lösenord som du fått. Fungerar det inte hör av dig till Mari-Anne

Läs mer

IT-körkort för språklärare. Modul 9: Rätta skrivuppgifter

IT-körkort för språklärare. Modul 9: Rätta skrivuppgifter IT-körkort för språklärare Modul 9: Rätta skrivuppgifter Innehåll I. Rätta uppgifter i Word... 3 Markera fel med färger snabbt och enkelt... 3 Använd Words rättningsverktyg skriv kommentarer... 4 Gör ändringar

Läs mer

Workshop PIM 2 - PowerPoint

Workshop PIM 2 - PowerPoint Workshop PIM 2 - PowerPoint Varje ny sida i bildspelet kallas för en Bild. Foton och andra bilder som man lägger in kallas för Bildobjekt. All text skrivs i Textrutor. Växlingen från en bild till nästa

Läs mer

Färgtyper. Färg. Skriva ut. Använda färg. Pappershantering. Underhåll. Felsökning. Administration. Index

Färgtyper. Färg. Skriva ut. Använda färg. Pappershantering. Underhåll. Felsökning. Administration. Index Med skrivaren får du möjlighet att kommunicera med färg. drar till sig uppmärksamhet, ger ett attraktivt intryck och förhöjer värdet på det material eller den information som du skrivit ut. Om du använder

Läs mer

ANVÄNDARBESKRIVNING FÖR PERSONAL

ANVÄNDARBESKRIVNING FÖR PERSONAL ANVÄNDARBESKRIVNING FÖR PERSONAL 1 INLEDNING Programmet ipool är ett system för att på ett effektivt sätt sköta bemanning och personalinformation via ett webbaserat gränssnitt som är enkelt att använda

Läs mer

Användarmanual för Content tool version 7.5

Användarmanual för Content tool version 7.5 Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN

Läs mer

Kom igång och redigera din hemsida!

Kom igång och redigera din hemsida! Kom igång och redigera din hemsida Smelink WEB l Storgatan 14 l 352 31 Växjö l support@smelink.se l www.smelink.se Senast uppdaterad: 100915 Del 1 Logga in Välkommen att ta del av vårt uppdateringsverktyg,

Läs mer

Kom igång och redigera din hemsida!

Kom igång och redigera din hemsida! Kom igång och redigera din hemsida Smelink WEB l Storgatan 14 l 352 31 Växjö l support@smelink.se l www.smelink.se Senast uppdaterad: 120918 Del 1 Logga in Välkommen att ta del av vårt uppdateringsverktyg,

Läs mer

Grunder. Grafiktyper. Vektorgrafik

Grunder. Grafiktyper. Vektorgrafik 2 Grunder All vår början bliver svår eller hur det nu brukar heta, och detta är något som gäller även Flash. För den som är ovan vid Flash gäller det säkert extra mycket, då det kan vara knepigt att förstå

Läs mer

Använda Internet. med hjälp av Internet Explorer. Nybörjarguide

Använda Internet. med hjälp av Internet Explorer. Nybörjarguide Använda Internet med hjälp av Internet Explorer Nybörjarguide Av Carl Ewnert 1 Innehåll: 1. Introduktion 3 2. Utseendet 4 3. Verktygsfältet 4 4. Börja Surfa. 5 5. Att söka på Internet 5 6. Spara en sida

Läs mer

Lär dig grunderna i Photoshop Elements 4.0

Lär dig grunderna i Photoshop Elements 4.0 Lär dig grunderna i Photoshop Elements 4.0 Här får du lära dig hur man flyttar bilder från kameran till datorn, hur man fixar till ett foto, hur man skriver ut bilder och mycket mera. Lycka till! copyright

Läs mer

Gör en modern släktbok för CD eller webben

Gör en modern släktbok för CD eller webben Gör en modern släktbok för CD eller webben 21 Den traditionella släktboken består av ett antal tabeller och i bästa fall en grafisk stam- eller antavla, och man kan med ett register eller hänvisningar

Läs mer

Fotobok-guide Så här gör du en egen Ifolorbok

Fotobok-guide Så här gör du en egen Ifolorbok Fotobok-guide Så här gör du en egen Ifolorbok 01/12 Vad är en Ifolorbok och Ifolor Designer? En Ifolorbok är en äkta tryckt bok med pärmar och innehåll som du själv skapat med dina foton och texter. Ifolorboken

Läs mer

Prioritet. Varför digitalisera? Apparater; i allmänhet. Datorn

Prioritet. Varför digitalisera? Apparater; i allmänhet. Datorn Prioritet. Varför digitalisera? Syftet påverkar digitaliseringsinställningarna. Vill man rädda ett skört material? Vill man göra det tillgängligt på netet? Finns det efterfrågan på dylikt material? Beakta

Läs mer

Manual för. 2.5 KALAS Sitemanager

Manual för. 2.5 KALAS Sitemanager Manual för 2.5 KALAS Sitemanager 1. INTRODUKTION...1 1.1 SYSTEMKRAV...1 1.1.1 Visning av sidor...1 1.1.2 Produktion av sidor...1 1.1.3 Inloggning...1 2. KALAS SITEMANAGER...3 2.1 LÄGGA TILL EN WEBBSIDA...4

Läs mer

«Sida 2 av 4 Till kursens framsida Sida 4 av 4»

«Sida 2 av 4 Till kursens framsida Sida 4 av 4» Sida 1 av 11 Lektion 1: sida 3 av 4 «Sida 2 av 4 Till kursens framsida Sida 4 av 4» 2. Formatera text Du kan ju redan skriva in text, men nu ska vi se hur man formaterar det man skrivit in -- alltså hur

Läs mer

SENIORER SENIORER. Grundläggande IT för. Windows 7. Grundläggande IT för. Windows 7. Eva Ansell Marianne Ahlgren. Eva Ansell Marianne Ahlgren

SENIORER SENIORER. Grundläggande IT för. Windows 7. Grundläggande IT för. Windows 7. Eva Ansell Marianne Ahlgren. Eva Ansell Marianne Ahlgren 600 IT för seniorer Windows 7.qxp 2011-06-0 10:27 Sida 1 Eva Ansell Marianne Ahlgren Eva Ansell Marianne Ahlgren Grundläggande IT för SENIORER Windows 7 Det här är en bok för dig som behöver grundläggande

Läs mer

Kurs 5:1 Att presentera med PowerPoint del 1

Kurs 5:1 Att presentera med PowerPoint del 1 Kurs 5:1 Att presentera med PowerPoint del 1 STUDENTDATORUTBILDNINGEN MALMÖ HÖGSKOLA Att presentera med bildspel, del 1 Här är en kort vägledning som kan hjälpa dig i ditt arbete med att skapa en presentation.

Läs mer

En grund i bildbearbetning för webben i Photoshop Elements 11

En grund i bildbearbetning för webben i Photoshop Elements 11 En grund i bildbearbetning för webben i Photoshop Elements 11 Mappstrukturering... 2 Arbetsflöde bildbearbetning för webb Beskär... 3 Storleksförändra bild... 4 Skärpa... 5 Spara för webb... 6 Från logga

Läs mer

3. Hämta och infoga bilder

3. Hämta och infoga bilder Sida 1 av 8 Lektion 1: sida 4 av 4 «Sida 3 av 4 Till kursens framsida 3. Hämta och infoga bilder Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder? Det är inte svårt alls! Det

Läs mer

Så här använder du de enklaste funktionerna i programmet: Starta programmet. Programmet startas från ikonen på skrivbordet.

Så här använder du de enklaste funktionerna i programmet: Starta programmet. Programmet startas från ikonen på skrivbordet. PhotoFiltre 1 Innehåll Starta programmet... 3 Rotera bilden... 4 Beskära bilden... 4 Ljusa upp en bild... 5 Förminska bilden... 6 Skärpa i bilden... 7 Spara och komprimera bilden... 7 Ta bort röda ögon...

Läs mer

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm WordPress är ett kraftfullt publiceringsverktyg för webben som trots sin flexibilitet och styrka är lätt att komma igång

Läs mer

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt 1. Inställningar / Kontaktuppgifter Uppgifter som matas in i den vyn ovan visas i sidfoten på hemsidan: 2. Skapa nya sidor Om man

Läs mer

Dags att skriva uppsats?

Dags att skriva uppsats? Dags att skriva uppsats? Grundkurs i Word 2010 SDM Studentdatorutbildning vid Malmö högskola Att skriva i Word! 1 Börja skriva/skapa ditt dokument- något att tänka på 1 Spara ditt dokument 1 Bra att veta

Läs mer

Gör en egen webbplats

Gör en egen webbplats I det här avsnittet får du lära dig att bygga en egen minsida lägga till text och bilder skapa en egen design lägga till en bakgrund på webbplatsen I nästa nummer får du hjälp att bygga en större webbplats

Läs mer

och Lär dig surfa på Internet Bilden nedan föreställer Södertälje kommuns hemsidans startsida Adressen till hemsidan

och Lär dig surfa på Internet Bilden nedan föreställer Södertälje kommuns hemsidans startsida Adressen till hemsidan Utgåva 1 och Lär dig surfa på Internet Sammanställd av: SeniorNet i Södertälje November 2008 Vi använder här Microsofts surfprogram: Windows Internet Explorer På skrivbordet högerklickar du på ikonen:

Läs mer

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1 Personalsupport Medicinska fakulteten, Lunds universitet Textredigeraren Moodle version 2.7.1 Lars Rundgren, 2012-2014 Moodle 2.7.1 Textredigeraren Textredigeraren... 3 Nya ikoner i textredigeraren...

Läs mer

Manual för webbpublicering. Enköpings kommun

Manual för webbpublicering. Enköpings kommun Manual för webbpublicering Enköpings kommun Innehåll ATT LOGGA IN I SWWWING 3 Inloggningsrutan 3 GRÄNSSNITTET 4 Filhanteraren 4 Content Management 4 Verktyget Notify - Dags att uppdatera 4 SKAPA OCH REDIGERA

Läs mer

Måldriven, informationscentrerad webbdesign

Måldriven, informationscentrerad webbdesign Måldriven, informationscentrerad webbdesign Linus Forsell Digitala Distributionsformer vid Högskolan Väst, Trollhättan, Sverige linus.forsell@student.hv.se 1 Abstrakt I den här essän kommer måldriven och

Läs mer

DynaPahlm är användbart på många olika typer av webbplatser. Denna handbok ger dig tips och vägledning till hur du bäst använder DynaPahlm

DynaPahlm är användbart på många olika typer av webbplatser. Denna handbok ger dig tips och vägledning till hur du bäst använder DynaPahlm Användarhandbok (testsite http://www.pahlm.com/dynapahlm/ Förord DynaPahlm är levererat tillsammans med din webbplats från KM-Företagsutveckling. DynaPahlm är ett Content Management System (CMS), fritt

Läs mer

bilder för användning

bilder för användning Grundläggande guide i efterbehandling av bilder för användning på webben Innehåll Innehåll...2 Inledning...3 Beskärning...4 Att beskära en kvadratisk bild...5 Att beskära med bibehållna proportioner...5

Läs mer

2009-08-20. Manual för Typo3 version 4.2

2009-08-20. Manual för Typo3 version 4.2 2009-08-20 Manual för Typo3 version 4.2 1 2 Innehåll: 1. Allmänt 4 2. Grunderna i Typo3 5 2.1 Knappar 5 2.2 Inloggning 5 2.3 Den inledande vyn 6 2.4 Sidträdet 7 3. Sidor 8 3.1 Skapa en ny sida 8 3.1.1

Läs mer

Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson

Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson Klarspråk på nätet är en praktisk handbok för dig som någon gång skriver text för webb, surfplattor och

Läs mer

Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.

Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan. WorkShop II Checklistor 1.2 Överordnad Struktur Balance: Gränssnittet har just nu viss balans i innehållet, men menyn behöver justeras i förhållande med innehållet samt en fast container för innehållet

Läs mer

Hjälp till BoD easyeditor

Hjälp till BoD easyeditor Hjälp till BoD easyeditor 1 TEXT 1.1 Innehållsförteckning och kapitel 1.2 Skapa nytt kapitel och bearbeta 1.3 Skriva/infoga 1.4 Formatera/skapa 1.5 Ytterligare funktioner 2 BILDER 2.1 Ladda upp bilder

Läs mer

DigitalBild del 2 Adobe Photoshop Elements ver 3.0

DigitalBild del 2 Adobe Photoshop Elements ver 3.0 Sidan 1 av 5 Inbyggd hjälpfunktion i Photoshop Elements...2 Dataprogram för bildbehandling...2 Forts. Adobe Photoshop Elements verktygsfält...2 Menyraden, Bild...3 Ändra bildstorlek...3 Reglera filkompressionen

Läs mer

Att använda bildhanteringsprogram, del 2

Att använda bildhanteringsprogram, del 2 Att använda bildhanteringsprogram, del 2 Gå till Adobe Online (M) Markeringsram - (L) Lasso - (C) Beskärning - (J) Airbrush - (S) Klonstämpel - (E) Suddgummi - (R) Oskärpa - (A) Markering av bankomponenter

Läs mer

Grafsk Profl. Stilmanual för Astronomisk Ungdoms kommunikation

Grafsk Profl. Stilmanual för Astronomisk Ungdoms kommunikation Grafsk Profl Stilmanual för Astronomisk Ungdoms kommunikation Inledning Varför grafsk profl? Identifkation För att alla ska uppfatta att det är Astronomisk ungdom som står bakom ett meddelande måste vi

Läs mer

Snabbguide. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard.

Snabbguide. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard. Verktygsfunktioner i BAS Snabbguide Klicka på det verktyg du vill jobba med. Det verktyg

Läs mer

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Manual Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Innehållsförteckning Start... 3 Lägg till ny sida...3 Redigera sida som redan finns...3 Titta på resultatet...

Läs mer

Optimala bildinställningar för leverans TEORIHÄFTE TILL KURSEN

Optimala bildinställningar för leverans TEORIHÄFTE TILL KURSEN Optimala bildinställningar för leverans TEORIHÄFTE TILL KURSEN Färgrymd Vad är egentligen en färgrymd? Digitala enheter (tex skärmar, skrivare, scanners) kan inte återge alla färger som det mänskliga ögat

Läs mer

APA för nybörjare. Innan du börjar. Översikt

APA för nybörjare. Innan du börjar. Översikt APA för nybörjare Den här texten är tänkt som en snabb introduktion hur du kan använda publiceringssystemet APA (Advanced Publication Application) för att redigera webbplatser. Texten kräver inga förkunskaper

Läs mer

Grafisk manual. Innehåll. Kontakt: max@desmond.com

Grafisk manual. Innehåll. Kontakt: max@desmond.com Grafisk manual Innehåll Kontakt: max@desmond.com Förutsättningar Hoop skall ha en modern och sportig profil som skall vara denna manual trogen i allt formellt material som: Brev, Mejl, Instruktionsböcker

Läs mer

Webzoo AB har idag ett tiotal anställda. Webzoo AB ägs till 100 % av anställda inom företaget och har en sund ekonomisk grund som bas.

Webzoo AB har idag ett tiotal anställda. Webzoo AB ägs till 100 % av anställda inom företaget och har en sund ekonomisk grund som bas. Backoffice Manual Inledning Webzoo AB Webzoo är en webbyrå som varit med sedan internet började ta fart under mitten av 90-talet. Vi hjälper till från idé till lansering och med alla behov som det kan

Läs mer

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp Lathund till Publisher TEXT Pekverktyget använder du när du ska markera en ram som du vill förändra på något sätt. Klicka på textverktyget. Placera muspekaren på den tomma dokumentytan, det spelar ingen

Läs mer

PixlrGuiden - av AlizonWeb PIXLRGUIDEN. av AlizonWeb. Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1

PixlrGuiden - av AlizonWeb PIXLRGUIDEN. av AlizonWeb. Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1 PIXLRGUIDEN av AlizonWeb Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1 Innehåll Introduktion 3 Vad är Pixlr? 3 Fördelar med Pixlr 3 Om denna guide 3 Kapitel 1: Genomgång av arbetsyta

Läs mer

Grundredigering i Photoshop Elements

Grundredigering i Photoshop Elements Grundredigering i Photoshop Elements Denna artikel handlar om grundläggande fotoredigering i Elements: Att räta upp sneda horisonter och beskära bilden, och att justera exponering, färg och kontrast, så

Läs mer

Webbsida i Wordpress. Existens på webben och bli sökbar

Webbsida i Wordpress. Existens på webben och bli sökbar Webbsida i Wordpress Existens på webben och bli sökbar Om Susann Rickan Susann Rickan bor i Nora Byggt webbsidor i 16 år Eget företag sedan 2009. Hjälper företag med webb och foto. Tycker om att bygga

Läs mer

Lär dig POWERPOINT. Lars Ericson datorkunskap.com

Lär dig POWERPOINT. Lars Ericson datorkunskap.com Lär dig POWERPOINT Lars Ericson datorkunskap.com POWERPOINT D A Programmet Microsoft PowerPoint används till att skapa grafiska presentationer till bildspel, presentationer mm. När du öppnar upp PowerPoint

Läs mer

INT 3 F3. En texts läsbarhet. Teckensnitt. Medieteknik Del1. Färger, teckensnitt och bildformat

INT 3 F3. En texts läsbarhet. Teckensnitt. Medieteknik Del1. Färger, teckensnitt och bildformat INT 3 F3 Medieteknik Del1 Färger, teckensnitt och bildformat DSV Peter Mozelius En texts läsbarhet Teckensnitt Teckengrad Radlängd Radavstånd Papper/Skärm Bakgrundsfärg Teckensnitt Teckensnitt kan delas

Läs mer

Internet. En enkel introduktion. Innehåll:

Internet. En enkel introduktion. Innehåll: Internet En enkel introduktion Innehåll: Datorns olika delar Starta datorn Så gör du om du kan webbadressen Så gör du om du inte kan webbadressen Kortfattad repetition Alingsås bibliotek, 2012 2 3 4 6

Läs mer

batklubben.eu s hemsida

batklubben.eu s hemsida batklubben.eu s hemsida redigera din sida av webbplatsen 1. Skriv in http://www.din_doman.se/admin i browserns adressfält. 2. Skriv in ditt användarnamn och lösenord i inloggningsrutan, och tryck OK. 3.

Läs mer

www.pts.se/archive/documents/ SE/Rapport_tillganglig_webb_2004_14.pdf 2 webzone.k3.mah.se/k99ac3hl/helenalackmagisterkogniton2003.

www.pts.se/archive/documents/ SE/Rapport_tillganglig_webb_2004_14.pdf 2 webzone.k3.mah.se/k99ac3hl/helenalackmagisterkogniton2003. 2 3 1 Är samhällsviktiga tjänster på Internet tillgängliga för personer med funktionshinder? PTS-ER-2004:14, ISSN 1650-9862. www.pts.se/archive/documents/ SE/Rapport_tillganglig_webb_2004_14.pdf 2 webzone.k3.mah.se/k99ac3hl/helenalackmagisterkogniton2003.pdf

Läs mer

Lathund Hemsida för Astma- och Allergiförbundets föreningar

Lathund Hemsida för Astma- och Allergiförbundets föreningar 1/17 Lathund Hemsida för Astma- och Allergiförbundets föreningar Webbplatsen är byggd i WordPress 3.8.1. Den är byggd för att på ett enkelt sätt ska kunna skapa nya föreningshemsidor och innehåller: Inloggning

Läs mer

Programmets startmeny ser ut så här. För att få fram menyerna Avsluta, Inställningar och Användare måste du föra markören upp till det blåa fältet.

Programmets startmeny ser ut så här. För att få fram menyerna Avsluta, Inställningar och Användare måste du föra markören upp till det blåa fältet. Programmets startmeny ser ut så här. För att få fram menyerna Avsluta, Inställningar och Användare måste du föra markören upp till det blåa fältet. Då du klickar på Användare öppnas denna bläddringslista.

Läs mer

- en expertanalys. av Anna Olvenmyr

- en expertanalys. av Anna Olvenmyr IT-universitetet i Göteborg MDI. Interaktionsdesign - en expertanalys av Anna Olvenmyr Grafiska Gränssnitt, 5 poäng 2003-10-27 Inledning och kategorisering...3 Utvärdering indelad i kategorier...4 Impression/

Läs mer

Macromedia Flash MX 2004

Macromedia Flash MX 2004 Mittuniversitetet ITM Telefon 0771-97 50 00 Erik Öberg Macromedia Flash MX 2004 Visuell kommunikation Detta exemplar tillhör: VT 2005 Innehåll Inledning...0 Startsidan...0 Miljö...0 Verktyg...1 Uppgift

Läs mer

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering

Läs mer

Snabbkurs i Wordpress för IOGT-NTO

Snabbkurs i Wordpress för IOGT-NTO Snabbkurs i Wordpress för IOGT-NTO Välkommen till din nya sida! Det här materialet är till för att ge en snabb genomgång av din nya sida och de olika funktionerna så att du snabbt kan komma igång och arbeta

Läs mer

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering

Läs mer

Adobe PHO SHOP CC. Fördjupning

Adobe PHO SHOP CC. Fördjupning Adobe PHO SHOP CC Fördjupning Innehållsförteckning 1 Färghantering...5 Färgomfång... 6 Behöver du färghantering?... 6 Färginställningar... 6 Arbetsfärgrymder... 8 Färgmodeller... 9 Provtryck... 11 Kalibrera

Läs mer

INSPIRA. Microsoft. PowerPoint Grunder

INSPIRA. Microsoft. PowerPoint Grunder INSPIRA Microsoft PowerPoint Grunder Del. ClipArt och bilder 78 6. Diagram 87 7. Organisationsschema 98 8. Tabeller 0 9. Bildspel 0. Praktiska övningar 6 CLIPART OCH BILDER CLIPART OCH BILDER Infoga ClipArt

Läs mer

ANVÄNDARGUIDE. ViTex

ANVÄNDARGUIDE. ViTex ANVÄNDARGUIDE ViTex ViTex snabbguide 1. Inläsning till ViTex från inskannat dokument via kopiatorn 2. Uppläsning i ViTex 3. Navigation & Zoner 4. Ändra inställningar 5. Kontakt och Support 1. Inläsning

Läs mer

FÄRGER GRAFISKA ELEMENT BILD- OCH TEXTMANÉER ANVÄNDNING SLUTORD

FÄRGER GRAFISKA ELEMENT BILD- OCH TEXTMANÉER ANVÄNDNING SLUTORD GRAFISK MANUAL IDENTITET INNEHÅLL Grafisk design och kommunikation är en sektion med en stark identitet. Vi vet vilka vi är och hur vi gör. Denna manual har gjorts för att alla andra också ska veta vilka

Läs mer

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0.

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Version 2.0 onsdag 12 oktober 2016 1 av 8 Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Kort beskrivning Instruktioner: Nedan finner du instruktioner kring hur du skapar wallpaper för ratsit.se.

Läs mer

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning.

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Sida 1 av 23 Editor, Avancerad I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Detta dokument syftar till att hjälpa dig som vill jobba mer aktivt

Läs mer

Bilaga 2. Layoutstöd för examensarbeten och uppsatser

Bilaga 2. Layoutstöd för examensarbeten och uppsatser Bilaga 2 Layoutstöd för examensarbeten och uppsatser Lärstöd Karlstads universitetsbibliotek ht 2007 Layoutstöd examensarbeten och uppsatser ht -07 Innehåll 1. Inledning...1 1.1 Dispositon...2 2. Om omslag...3

Läs mer

Hur man skapa en Wiki.

Hur man skapa en Wiki. Hur man skapa en Wiki. Ordet wiki (i t.e.x Wikipedia) kommer från Hawaiian och betyder snabbt. Kortfattat kan man säga att en wik i är en webbplats där alla enkelt kan publicera och redigera material när

Läs mer

Skyltdirekt 08-550 029 79 www2.skyltdirekt.nu support@skyltdirekt.nu

Skyltdirekt 08-550 029 79 www2.skyltdirekt.nu support@skyltdirekt.nu Med Skyltdirekt.nu skapar du på ett användarvänligt sätt pris och produktskyltar. Alla i butiken kan skapa prisskyltar. Ingen datavana eller installation krävs. Skyltdirekt 08-550 029 79 www2.skyltdirekt.nu

Läs mer

GRAFISK PROFIL TIDAHOLMS KOMMUN

GRAFISK PROFIL TIDAHOLMS KOMMUN GRAFISK PROFIL TIDAHOLMS KOMMUN INNEHÅLL 2 3 4 5 6 7 8 8 8 Varför grafisk profil? Övergripande riktlinjer Logotyper Kommunvapen Tidaholmslogotyp Verksamhetsspecifika symboler Skyltar Mallar Audiell profil

Läs mer

DigitalBild del 2 Adobe Photoshop Elements ver 5.0

DigitalBild del 2 Adobe Photoshop Elements ver 5.0 Sidan 1 av 5 Inbyggd hjälpfunktion i Photoshop Elements... 2 Dataprogram för bildbehandling... 2 Forts. Adobe Photoshop Elements verktygsfält... 2 Menyraden, Bild...3 Ändra bildstorlek...3 Intensitet och

Läs mer

Redigera bilder snabbt och enkelt!

Redigera bilder snabbt och enkelt! Redigera bilder snabbt och enkelt! När du ska ladda upp bilder till din hemsida så är det klokt att anpassa bilderna så att dom får rätt storlek och att dom blir så lätta som möjligt i filstorlek. Detta

Läs mer

Innehållsförteckning. Kurs i MS Office 2010-2013 våren 2013 Word

Innehållsförteckning. Kurs i MS Office 2010-2013 våren 2013 Word Kurs i MS Office 2010-2013 våren 2013 Word Innehållsförteckning Office 2013 Översikt... 2 Introduktion till Office 2013 Sv... 2 Gränssnitt med menyflikar... 2 ARKIV fliken Backstage vyn... 2 Flytta/ändra

Läs mer

Lions Clubs Internationals användarhandbok för e-klubbhuset

Lions Clubs Internationals användarhandbok för e-klubbhuset Lions Clubs Internationals användarhandbok för e-klubbhuset OCEC4.SW V02.2014 1 Du kan enkelt redigera klubbens webbplats med e-klubbhussystemet genom att följa instruktionerna i den här användarhandboken.

Läs mer

SCRIBUS grund. Guide och uppgifter. ITlyftet Gunnar Markinhuhta. Sida 1

SCRIBUS grund. Guide och uppgifter. ITlyftet Gunnar Markinhuhta. Sida 1 SCRIBUS grund Guide och uppgifter ITlyftet Gunnar Markinhuhta Sida 1 Scribus grund del 1 Text och textramar Inställningar: 1. Gå till Fil/Inställningar 2. Välj Dokument 3. Ändra enheter till millimeter.

Läs mer

Snabbguide för användare SourceTech Telllus

Snabbguide för användare SourceTech Telllus Snabbguide för användare SourceTech Telllus Copyright SourceTech AB 2000-2012 Innehållet i denna manual är skyddat enligt upphovsrättslagen och får varken helt eller delvis kopieras utan uttrycklig tillåtelse

Läs mer