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ä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

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

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

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

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

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

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

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

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

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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ATT GÖRA WEBBSIDOR. Frivillig labb

ATT GÖRA WEBBSIDOR. Frivillig labb Numerisk analys och datalogi KTH 100 44 Stockholm Kerstin Frenckner, tel 790 7143, e-post kfrenck@nada.kth.se 2D1339 Programkonstruktion Hösten 2001 Datorintroduktion Frivillig labb ATT GÖRA WEBBSIDOR

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

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

Lathund ClaroRead Plus v6

Lathund ClaroRead Plus v6 Lathund ClaroRead Plus v6 sid 2. sid 3. sid 4. sid 5. sid 6. sid 7. sid 8. sid 9. sid 10. Starta ClaroRead Plus. Inställningar för verktygsraden. Välja röst och språk. Läsa upp text. Inställningar för

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

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

Den grafiska profilieringen för roar

Den grafiska profilieringen för roar Den grafiska profilieringen för roar 2013 edition INNEHÅLL LOGOTYP 04 LOGOTYPENS FRIZON 05 TYPOGRAFI 06 FÄRGER 07 KONTORSMATERIAL 08 ANNONS & BILDER 10 BROSCHYR 12 GRAFISKA ELEMENT/BYXMÄRKE 14 WEBBSIDA

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

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

Kom igång med FrontPage 2003

Kom igång med FrontPage 2003 Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker

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

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

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

Skillnader mellan design för tryck och webbdesign

Skillnader mellan design för tryck och webbdesign Vad är en webbtext? Webbtexter är inte en specifik texttyp i likhet med protokoll, rapporter eller artiklar. Istället kan webbtexter vara precis vilken texttyp som helst, och det enda som förenar dem är

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

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

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

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

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

ATT ARBETA MED VEKTORGRAFIK

ATT ARBETA MED VEKTORGRAFIK ATT ARBETA MED VEKTORGRAFIK Helene Brogeland Vektorgrafik och animation VT 2014 2014-04-29 Inledning Före aktuell kurs hade jag bara en vag uppfattning av innebörden av vektorgrafik och hade aldrig jobbat

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

Bilder Innehåll: Inledning Minneskort Ansluta kamera eller minneskort Föra över bilder, ett sätt Föra över bilder, ett a nnat sätt

Bilder Innehåll: Inledning Minneskort Ansluta kamera eller minneskort Föra över bilder, ett sätt Föra över bilder, ett a nnat sätt Bilder Innehåll: Inledning 1 Minneskort 1 Ansluta kamera eller minneskort 1 Föra över bilder, ett sätt 2 Föra över bilder, ett annat sätt 4 Var finns bilderna på datorn 6 Avslutning 6 Inledning 2 Välkommen

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

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

Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor. Projektarbete Solveig Betnér Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor Projektarbete Solveig Betnér Innehållsförteckning Syfte s. 3 Målgrupp s. 3 Genre s. 3 Funktionalitet s. 4 Prototyper s. 5

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

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

Bilder... Dagens föreläsning. Objektgrafik. Objektgrafik. TNMK30, 2010 Föreläsning

Bilder... Dagens föreläsning. Objektgrafik. Objektgrafik. TNMK30, 2010 Föreläsning TNMK30, 2010 Föreläsning Bilder... Tobias Trofast, LiU 1 Dagens föreläsning Olika grafikformat Bitdjup Färglägen och kanaler Komprimering Filformat Bildkvalitet Upplösning & Interpolering Objektgrafik

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

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se Macromedia Dreamweaver 8 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 1 Arbeta i Dreamweaver... 3 Fönster... 4 Statusfältet... 4 Menyer...

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

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

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

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

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

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

Skapa innehåll. Logga in och administrera hemsidan. Inloggningslänk: www.alvsbyn.se/wp-admin. Byta lösenord

Skapa innehåll. Logga in och administrera hemsidan. Inloggningslänk: www.alvsbyn.se/wp-admin. Byta lösenord Sidan 1 av 9 Logga in och administrera hemsidan Inloggningslänk: www.alvsbyn.se/wp-admin Byta lösenord 2. Klicka på Profil 3. Längst nere hittar du två fält: Nytt lösenord och Bekräfta nytt lösenord. Fyll

Läs mer

Vad är Internet? Innehåll: Inledning Vad är Internet? Om du kan Internetadressen Söka på Internet Länklistor Övningar Repetition

Vad är Internet? Innehåll: Inledning Vad är Internet? Om du kan Internetadressen Söka på Internet Länklistor Övningar Repetition Vad är Internet? Innehåll: Inledning 1 Vad är Internet? 2 Om du kan Internetadressen 3 Söka på Internet 6 Länklistor 9 Övningar 10 Repetition 11 Kortfattad repetition 9 6 Inledning Välkommen till Nyfiken

Läs mer

Webbsidekurs för nybörjare

Webbsidekurs för nybörjare Webbsidekurs för nybörjare Hörselskadades distrikt i Stockholms län (www.distriktet.info) Inledande faktaruta Alla HRF föreningar erbjuds möjligheten att kostnadsfritt publicera information på en egen

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

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi

Läs mer

INLEDNING. Inledning Logotyp Färger Teckensnitt Tillämpningar

INLEDNING. Inledning Logotyp Färger Teckensnitt Tillämpningar GRAFISK MANUAL INLEDNING Den här manualen beskriver hur vi arbetar med vår grafiska profil. I den hittar du allt från användandet av logotypen och hanterandet av färger och typografi, till mallar för utformning

Läs mer

UNDER COVER OF DARKNESS. Bachelor s thesis for Photography, Media Culture Novia University of Applied Sciences Jakobstad 2013

UNDER COVER OF DARKNESS. Bachelor s thesis for Photography, Media Culture Novia University of Applied Sciences Jakobstad 2013 UNDER COVER OF DARKNESS Bachelor s thesis for Photography, Media Culture Novia University of Applied Sciences Jakobstad 2013 Copyright Niklas Nabb 2013 Innehållsförteckning Inledning 5 Inspiration 7 Arbetsprocessen

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

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

Blickfång proffsen litar på

Blickfång proffsen litar på Blickfång proffsen litar på Undvik vanliga fallgropar 1) Se till att göra din bild i rätt format. På hemsidan vid varje tryckbar produkt nämner vi Designstorlek och Bildstorlek. Bildstorleken är den synliga

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

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

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

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

Sidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem.

Sidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem. Kap 03.indd 444 KAPITEL TRE Sidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem. Gadgetar och den nya Sidpanelen är nog mina favoriter bland de nya funktionerna i Windows Vista.

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

Manual till publiceringsverktyg

Manual till publiceringsverktyg Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten

Läs mer

Sammanställd av Peter Essen Datoriet - Lundby 2002-05-07

Sammanställd av Peter Essen Datoriet - Lundby 2002-05-07 Sammanställd av Peter Essen Datoriet - Lundby 2002-05-07 1 Denna bok är producerad med Claris Works 4.0 för Windows 95 2 Innehåll Förord... 4 1 - FrontPage 2000 - en första titt...5 2 - Skapa en webb-plats...9

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

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

Kurs 7:1 Att använda bildhanteringsprogram

Kurs 7:1 Att använda bildhanteringsprogram Kurs 7:1 Att använda bildhanteringsprogram S TUDE NTDATOR UTBILDNINGE N MALMÖ HöGSKOLA Beijerskajen 8, K3, källaren, sal Apollo (A01:303), 205 06 Malmö www.bit.mah.se/undervisning/sdm Att använda bildhanteringsprogram,

Läs mer

WEBB365.SE. Hur skriver man sökmotoroptimerade texter

WEBB365.SE. Hur skriver man sökmotoroptimerade texter Hur skriver man sökmotoroptimerade texter Introduktion Det finns mycket man kan göra för att lyckas på nätet och att skriva sökmotoroptimerade texter är definitivt en av de viktigare. I korta ordalag kan

Läs mer

DOTNETNUKE SKOLNING Skapat: den 20 november 2012

DOTNETNUKE SKOLNING Skapat: den 20 november 2012 DOTNETNUKE SKOLNING Skapat: den 20 november 2012 CONTENTS WebbSidans Layout... 3 Inloggning... 3 Kontroller för administrering... 4 Växla visnings läge... 4 View Läge... 4 Edit Läge... 4 Layout Läge...

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

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

GRAFISK PROFILMANUAL GRAFISK PROFILMANUAL

GRAFISK PROFILMANUAL GRAFISK PROFILMANUAL 1 GRAFISK PROFILMANUAL 3 Innehåll LOGOTYPEN 6 FÄRGER 8 TYPOGRAFI 10 ANNONS 12 ROLL-UP 13 VEPA/BANDEROLL 14 VISITKORT 15 BREVPAPPER/FAXBLAD 16 KUVERT 17 FLAGGOR 17 PROFILKLÄDER 18 WEBB 19 BILDMANÉR 20

Läs mer

Förbundet Vi Ungas. Grafiska handbok

Förbundet Vi Ungas. Grafiska handbok Förbundet Vi Ungas Grafiska handbok Innehållsförteckning INLEDNING 2 KAPITEL ETT 3 LOGOTYPEN 4 Vad man inte får göra med Vi Ungas logotyp 5 FÄRGER 6 TYPSNITT 7 FLÄTAN 8 KAPITEL TVÅ 9 GRAFISKA ELEMENT 10

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

Snabbmanual. för. Lärresurshanteringsverktyget

Snabbmanual. för. Lärresurshanteringsverktyget Snabbmanual för Lärresurshanteringsverktyget Beskrivning av olika vyer i Lärresurshanteringsverktyget Skapa I detta fönster skapar man nya sidor och/eller väljer struktur på sin lärresurs. Men man redigerar

Läs mer

Frontpage 2002/XP (2)

Frontpage 2002/XP (2) Frontpage 2002/XP Frontpage 2002 eller Frontpage XP som det också kallas är ett hemsideprogram där du inte behöver kunna koda som annars är fallet om man gör en hemsida. Att snabbt, enkelt och snyggt kunna

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

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0 Webbtillgänglighet Webbtillgänglighet Att göra webbinnehåll så att de är tillgängliga för alla oavsett vilka funktionsnedsättningar man har Att göra webbinnehåll tillgängligt oavsett vilken in- och utmatningsutrustning

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

Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag

Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag Den här veckan Kapitel 7 och 11 Kom ihåg att boka tiden för handledning på fredag Uppsamling av missade övningar på onsdag Making it look good Visuell design Färger Typografi Exempel och patterns Komplex

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