PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+
|
|
- Inga Lundgren
- för 8 år sedan
- Visningar:
Transkript
1 PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+ IT-universitetet i Göteborg Interaktionsdesign - Grafiska Gränssnitt Deltagare: Anders Lundell, it3luan@ituniv.se, Text/tabellbearbetning, idéspruta Annica Löfving, it3loan@ituniv.se, Textbearbetning, idéspruta Anna Lindvall, d00anna@dtek.chalmers.se, Programmering, idéspruta Helena Callert, d00cache@dtek.chalmers.se, Programmering, idéspruta Kalle Ulvstig, ix3ulka@ituniv.se, Dokumentation, idéspruta Uppdrag: Skapa en webbplats åt PolyPlast+. Målgrupp: Okonventionella köpare (med plastindustrimått mätt), t.ex. inköpare, designers från stora koncerner eller företag som kan tänka sig att beställa något koncern/företagsspecifikt i förhållandevis små volymer. Mindre uppdragsgivare med udda önskemål om materialkombinationer (t.ex. plast och trä, plast och glas) eftersom man vill etablera sig såsom varande mycket kompetent inom dessa områden. Tidigare kunder. Företagets färger har hängt med ända sen starten och bär företagsidentiteten tillsammans med logotypen. Viktiga riktlinjer vi valt att följa vid utformning av PolyPlast+ webben Vi tycker att gränssnittet skall ge användaren överblick, navigation och position. Webbsidan skall visa innehållet och leda besökaren rätt. Gränssnittet vi valt skall hjälpa användaren att utföra det som vill göras. Användaren skall känna sig trygg i webbmiljön och gränssnittet skall visa de möjligheter som finns med gränssnittet. Vi har valt att anpassa gränssnittet till användargruppen (definieras ovan i målgrupp). Vi har valt att gränssnittet skall vara konsistent och konventionellt. Det är lättare att känna igen än att komma ihåg. Ett exempel som väger in här är färgval som kan kopplas till företagets logotyp samt företagsidentitet. Det skall vara lätt och snabbt att lära för användaren och användaren skall förstå de funktioner som finns på webbsidan. 1
2 Färg, form och andra designelement En del knep vi använt oss av för att få användaren skall stanna kvar på webbsidan är rubriker, symboler, färger och länkar. Det handlar om att skapa visuell mening, att tolka och guida användaren. En logisk och en visuell struktur har varit nyckelord vid skapandet av webbplatsen. Något vi även beaktat vid formgivning av webbsidans gränssnitt är i vilken miljö webbsidan skall användas i. Detta är viktigt eftersom ljus kan påverka kontrast eller liknande vid både text, färger och ikoner. Ett effektivt sätt vi valt för att gruppera informationen på webbsidan är genom att använda olika färger som finns i företagets logotyp. Vi kan då enkelt dela upp skärmen i olika områden. Genom hela webbgränssnittet har vi valt att använda två färger, grön och beige som finns i företagets logotyp. Företagets logotyp skall synas under hela besöket, eftersom detta medför att logotyp och namn blir inarbetat hos besökaren. Vi anser att det är viktigt att undvika att skapa nya designelement för redan existerande funktioner, t.ex. så skapas inte någon ny symbol som representerar till exempel webbsidans förstasida. Detta sker genom att trycka på en länk alternativt att trycka på företagets logotyp (igenkänning från tidigare besök). Designelementen vi designat ger användaren ledtrådar. Med detta menas att då man går med muspekaren över ett element så dyker en text dyka upp som skall ge användaren stöd vad elementet är för någonting, t.ex. i form av ett bildnamn. Webbadressen till företagets webbsida skall synas under hela besöket. Vi har valt att göra detta genom att längst ner på sidan hela tiden visa kontaktinformation till PolyPlast+ som innehåller; adress, telefon och e-post. Detta har vi gjort för att det skall vara enkelt för kunden att snabbt kontakta företaget. För att underlätta för användaren har vi valt att ha kontaktinformation även på andra delsidor. Frames En lösning vi valt att använda oss av är frames. Vi tycker det är viktigt att använda frames på rätt sätt och anpassar därför frameslösningen för flertalet olika typer av webbläsare. Vi anser att denna metafor mycket användbar och skapar ett mycket enkelt och lättnavigerat menysystem. Det är viktigt att visa var användaren befinner sig i en webbsida. Vi använder därför positionsangivelse på alla webbsidans delsidor. Detta underlättar navigering. Det är även viktigt ur kommunikationsperspektiv, då det är lättare att snabbt förstå informationen om användaren eller besökaren ser rubriceringen. Text och länkar Texten på denna webbsida skall förmedla information till användaren och den skall hjälpa användaren att fatta rätt beslut. Informationsmängden som vi fick tillgång till var massiv och eftersom en användare ofta skummar igenom informationen och för att användaren inte skall tröttna och lämna webbsidan har vi valt att dela upp texten i flertalet stycken på sidorna. Vi har 2
3 även bortsett från irrelevant information. Vi har valt att ha korta texter för att minimera scrollandet och behållaanvändarens intresse. Vi har valt sanseriffer (till exempel Arial) för all text på webbsidan. Detta har vi gjort eftersom dessa saknar klackar och då blir det mer flyt då användaren läser text på bildskärmar. Utvecklare som använder seriffer (till exempel Times New Roman) vid gränssnitt som är anpassade för bildskärmar riskerar att försvåra för användaren och texten flyter lätt ihop. Då vi vill att denna typ av teckensnitt (sanseriffer) alltid skall användas oberoende vilka teckenstilar som finns installerade på datorn, finns fyra alternativ att visa texten på. Dessa är Verdana, Arial, Helvetica eller Sans-serif. Teckenstorlek är satt till 12 pkt som är standard för webbsidans brödtext. Storleken har betydelse och vi anser att 12 pkt är den perfekta teckenstorleken för läsning av text på bildskärm. Större teckensnitt har vi valt vid rubriker, t.ex. på menyn för navigering på delsidorna som vi satt till 14 pkt. Ytterligare åtgärder för att underlätta för användaren är att markera viktiga ord i fet stil. Att använda sig av understrykning har vi inte gjort eftersom det liknar standarden för klickbara länkar. Dessutom förstör det ordbilden på samma sätt som i normal typografi. Kursiv stil är inte heller så bra eftersom skärmens låga upplösning och avsaknad av kantutjämning gör det svårt att få lutade linjer att bli tydliga. Vi har valt att använda svart på vit bakgrund text istället för färgad text och bakgrund. Detta dels så att inte användaren misstar den färgade texten för en länk och för att skarpa extrema färger kan skapa oharmoni och otydlighet. För att inte förvirra användaren har vi valt att ord som är understrukna betyder att det är en länk. Länkar du ännu inte klickat på är grön, besökta är mörkt gröna. Navigering Något som ofta kan krångla till det är att navigera rätt på webbsidan. Användargränssnitt handlar om förståelse, därför måste även navigeringen fungera tillfredsställande för hela målgruppen. Användaren skall veta vart hon är på väg, inte gå vilse och skall alltid ha lätt att hitta tillbaka. Det kan ofta vara krångligt att snabbt bläddra sig dit användaren vill i en webbsida. Vi har valt ett entydigt, snabbt och lättbegripligt verktyg för navigering. Navigeringen kommer att finnas med genom hela gränssnittet för att skapa konsistens, entydighet. Att vara konsekvent vid utformningen och placeringen av navigationsmenyn är viktigt. Det skall vara enkelt för användaren att gå tillbaka till föregående och tidigare besökta sidor. Av denna anledning har vi byggt upp med ett navigationssystem högst upp på sidan som sedan kommer att skapa undermenyer som är vänsterställd i vänster på skärmen. Vi valde att placera dem till vänster eftersom vi i västvärlden läser från vänster till höger och är naturligt för oss. Samma navigationsuppbyggnad återkommer vid alla undermenyer. Det går även att återgå till huvudmenyn genom att trycka på rubriken. Vi har valt att inte ge visuella vinkar om klickbara objekt eller områden på skärmen. Detta eftersom vi tror att det kan förvirra för användarna. Texten i navigationsmenyn har vi valt i de två färger som återspeglas i företagets logotyp. Detta för att förstärka det vänliga intrycket. Vi är dock medvetna om att detta kan förvirra för användaren men det är en estetisk designavvägning vi gjort vid designval. 3
4 Figur 1. Navigering Startsidan Förstasidan skall ge användaren all information som behövs för att kunna bedöma om sidan skall utforskas. Förstasidan skall avslöja hela innehållet. Vi pryder startsidan med ett gränssnitt som fungerar som en stor skylt och som leder besökaren rätt. Det som syns är det som existerar för användaren och det är därför viktigt att text och andra element ger all information användaren behöver så att besökaren kan utforska. Detta är just anledningen till att vi har en stor rubrik i början är för att intressera besökaren att söka vidare. Vi har även valt att göra denna text i en annan färg än svart för att skapa ett intresse hos besökaren (figur 2). Att bryta konventioner kan i detta fall vara bra anser vi då det ger ett visuellt intryck till besökaren. Vi har valt att designa webbsidan med runda hörn för att ge ett mjukt och vänligt intryck. De krav som skall finnas på startsidan är främst avsedda för att ge användaren ett intresse på webbsidan. Företagets verksamhet presenteras kortfattat och de delar som anser mest relevanta finns det en kort introduktion till. Texterna är redigerade för att ge ett högt läsvärde. Företagets webbsida består av ett antal delsidor som innefattar den information som skall finnas tillgänglig på webben. Denna information har framkommit genom dokumenterade bilagor som funnit tillgängligt på projektsidan. Vi har noggrant avvägt vilka delsidor som skall finnas och hur namngivningen av dessa skall ske. Namngivningen är viktigt av navigeringsskäl. Samtliga delsidor skall uppfylla kraven på samma typsnitt, teckenstorlek och designelement. För att komma tillbaka till startsidan kan besökaren klickar på hem eller företagets logotyp så kommer besökaren till startsidan. 4
5 Figur 2. Startsidan Delsidorna Delsidorna är uppbyggda så de hela tiden dyker upp innanför den grönfärgade ramen som omger sidan. Sidorna har vit bakgrund med en meny till vänster för navigering. Text- och färgval är motiverade enligt tidigare. För att komma tillbaka till delsidans huvudsida så klickar man delsidans titel som är en länk och detta syns genom att den är understruken. Vi har valt ett konsekvent menysystem, aktuella sidan markeras med fet stil i vänsterlistan, alltid samma toppmeny som nämnts tidigare. Funktionalitet Alla funktioner skall uppträda likadant och ge samma typ av resultat då de används. På de ställen då vi har placerat en länk till början på sidan så skall denna länk återkomma på liknande platser på webbsidan, samtliga delsidor har i grunden samma utseende och funktion. För att tydliggöra feedback på webbsidan har vi valt att skicka besökaren vidare till en ny sida som bekräftar att besökaren till exempel skickat e-post via formulär på webbsidan till företaget. Detta underlättar för användaren eftersom användaren får feedback på den handling som utförts. 5
6 Vi anser att det är viktigt att webbsidan ser likadan ut oavsett vilken version av webbläsare besökaren använder eller antal bildpunkter användaren använder. De sökbegrepp som vi valt att ha med har vi bestämt själva eftersom vi inte ha kunnat föra en dialog med företaget om deras önskemål. Bilder Vi har även valt att högerställa alla bilder eftersom text är enklast att läsa från vänster till höger och vi anser att bilderna är ett komplement till texterna så bilderna får följa principen att text till vänster och bilderna blir sedan vänsterställda texten. Loggan samt toppmenyalternativen är.gif -bilder. Bilderna på björnar etc. är jpg eftersom det passar bättre för foton med många färger. Samtliga foton är nedskalade, upplösningen är satt till 72 pixlar/tum vilket passar för webben och de är optimerade för att minska nedladdningstiden. De bilder som fungerar som länkar fungerar bara som en extra funktion och det går att nå dessa sidor genom navigering i menyn. Som informationsvisualiserande komplement till den faktaspäckade, textbaserade informationen om de olika plasternas egenskaper, valde vi att skapa en översiktstabell. Om omständigheterna hade varit annorlunda (ett riktigt företag; mer än en veckas spridda arbetsinsatser) hade det kunnat bli aktuellt med fler liknande tabeller eller sökfunktioner utifrån andra entiteter såsom t ex plasternas användningsområden, varumärken eller något annat relevant efter samråd med uppdragsgivaren. Vi extraherade från texten 26 olika egenskaper hos de olika plasterna, där nio av dem är ensamma om en viss egenskap. Detta kan ses som exempel på vilka problem man kan stöta på vid skapandet av översiktstabeller; skall man sträva efter en komplett, och därmed gles tabell eller en reducerad, tät dito där intressanta (?) egenskaper som t ex miljövänlig (PP- Propenplast) eller God åldringsbeständighet (PMMA-Akryl) saknas? Efter lite övervägande beslutade vi oss för att ge användaren möjlighet att se tabellen via en.pdf -länk på startsidan för fakta om plaster. Att ha tabellen direkt synlig här hade inte stämt överens med våra riktlinjer för text och länkar; det hade blivit för mycket för besökaren att ta in ofrivilligt. Vi valde.pdf - formatet eftersom detta dels är ett gratis insticksprogram och därmed finns tillgängligt på de flesta datorer, dels p g a smidigheten att kunna uppdatera tabeller i t ex Excel och med några få musklick göra.pdf -fil av den. Dessutom ger det fler möjligheter än genom en vanligt.gif eller.jpeg bild. Bearbetning av textinnehåll Eftersom informationen vi fick tillgång till var massiv gjorde vi flera avvägningar om vilken information som var relevant för webbsidans innehåll. Den information vi valde ansåg vi vara mest intressant utifrån målgruppen. Utifrån informationen vi valde att använda gjorde vi sedan avvägningar om eventuella bilder skulle komplettera texterna för att skapa ökad tydlighet och förståelse av texternas innebörd. I fallet med uppdragssidan föll det sig naturligt att ge besökaren en mer visuell upplevelse genom att låta respektive bild få mer utrymme än tillhörande text som ursprungligen var väl detaljerad beträffande de olika uppdragen. 6
Slutrapport: Design av Hemsida för PolyPlast+
Slutrapport: Design av Hemsida för PolyPlast+ Av: Behzad Charoose, Johan Magnuson, Mikael Onsjö och Sofie Persson Datum och Plats: 03-09-19 Göteborg, Chalmers/GU Anledning: Uppgiften ingick som en obligatorisk
Läs merbehövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.
1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera
Läs merWebbdesign. Fotografiska vann bästa webbsite 2015 i kategorin turism:
Webbdesign Man kan definiera webbdesign som konsten att skapa webbplatser. En webbdesigners uppgift är att välja färger som passar, lägga till bra och rätt funktioner till webbplatsen och sedan se till
Läs merGrafisk profil till Dear Area
Grafisk profil till Dear Area Av: Jenny Andersson & Josephine Persson 2008-09-26 Webbutvecklare på KY Akademien Introduktion Detta är en grafisk manual för Dear Area, ett designföretag som gör butiksinredning,
Läs merJenny Dafgård, Fredrik Johansson, Nils Järgenstedt, Yael Katzellenbogen och Klara Mälarberg. IT-Universitetet i Göteborg, HT03
SAMMANFATTNING Denna rapport beskriver hur Grupp 8 gick till väga för att skapa en webbplats för företaget Polyplast+. Processen påbörjades med en förstudie om Polyplast+, och fortsatte sedan med användaranalys,
Läs merGrundläggande funktioner i CMS ifrån Argonova Systems, 2011.
Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför
Läs merAnalys 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 merGränsöverskridande samverkan
1 Grafisk Profil Denna grafiska manual är en hjälp för dig som jobbar i eller med Vårdsamverkan Fyrbodal för att skapa en tydlig, enhetlig och konsekvent kommunikation med omvärlden. Vår logga, våra färger
Läs merEn enhetlig profil är viktig för alla organisationer
En enhetlig profil är viktig för alla organisationer och ännu viktigare för en stor grupp av frivilliga. Då öppnas möjligheten för att alla känner samhörighet och vet åt vilket håll gruppen går. Det gör
Läs merHur du gör ditt Gilles hemsida - en liten hjälp på vägen
Hur du gör ditt Gilles hemsida - en liten hjälp på vägen Sidan 2 - Logga in Sidan 3 - Uppbyggnad av en sida Sidan 4 - Infoga länk Sidan 5 - Infoga bilaga Sidan 6 - Infoga bild Sidan 7-8 Vad betyder knapparna
Läs merINDIVIDUELL INLÄMNINGSUPPGIFT
INDIVIDUELL INLÄMNINGSUPPGIFT Sofia Aronsson ANVÄNDBARHET OCH GRAFISK DESIGN MIS 13, Nackademin Yrkeshögskola Lärare: Ellinor Ihlström Inledning... 3! Analys... 3! Hitta... 3! Förstå... 5! Använda... 6!
Läs merRegler för publicering på www.vimmerby.se
Regler för publicering på www.vimmerby.se Antagen av kommunstyrelsen 2006-04-04 100 VIMMERBY KOMMUN 1. Kommunledningskontoret Kanslienheten LHR Regler för publicering på www.vimmerby.se 1. Inledning Internet
Läs merManual 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 merLATHUND TILL GOOGLE SITES
LATHUND TILL GOOGLE SITES 2012 Mörbyskolan Denna lathund går igenom hur du skapar, redigerar och kan använda Google Sites i undervisningen Rev. 1.0a Innehållsförteckning 1. VAD ÄR GOOGLE SITES? ES?.........2
Läs merTillgänglighetskrav på interaktion och design Dessa krav baseras på WCAG 2.0,
Tillgänglighetskrav på interaktion och design Dessa krav baseras på WCAG 2.0, http://www.w3.org/tr/wcag20/ UPPDRAGSGIVARE: Malmö stad VÅR REFERENS: Andreas Cederbom 08-555 770 64 andreas.cederbom@funkanu.se
Läs merRapport Projekt 1 Från material till webb
IT-Universitetet Grafiska gränssnitt, 6 p Göteborg 2003-09-19 Rapport Projekt 1 Från material till webb Grupp 1: Vilhelm Bergman Hanna Friberg Björn Nord Ulrika Olsson Marlene Sjöberg Innehållsförteckning
Läs merGRAFISK 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 merWEBB OCH INFORMATIONSDESIGN
IT-Universitet WEBB OCH INFORMATIONSDESIGN Grupp 10 2003-10-25 Handledare: Rapport - projekt 1 Grupp 10: Johan Bergsten Jenny Christensson Evelina Johansson Marie Lönnqvist Mia Malmberg Niklas Mårby Uppgift
Läs merAnalys av webbplatsen csn.se Personlig uppsats i kursen Interaktionsdesign Grafiska gränssnitt, hösten 2003
Analys av webbplatsen csn.se Personlig uppsats i kursen Interaktionsdesign Grafiska gränssnitt, hösten 2003 Helena Callert 1. Sammanfattning Denna uppsats beskriver en personlig analys av Centrala studiestödsnämndens
Läs merGrafisk profil för Ottenby Åkeri
Grafisk profil för Ottenby Åkeri Grafisk profil framtagen för Ottenby Åkeri utav designbyrån ADDinnovation 2006 Inledning Grafisk profil Den största vinsten med en enhetlig grafisk profil är att företagets
Läs merGRAFISK PROFILMANUAL
GRAFISK PROFILMANUAL JUNI 2017 INLEDNING Vår grafiska identitet är det snabbaste och starkaste uttrycksmedlet för vårt varumärke. Därför är det av största vikt att vi följer de grafiska riktlinjer som
Läs merManual - Introduktionskurs SiteVision
Sidan 1 Manual Introduktionskurs SiteVision 20141125 Version 2 Innehållsförteckning Logga in 2 Redigera text 3 Om bilder på ale.se 6 Lägga till en bild 7 Lägga till en länk i text 9 Lägga till länkar under
Läs mer1.2 Logotypens färgsättning
GRAFISK MANUAL Vår grafiska profil Den grafiska profilen utgörs av logotypen, våra färger och vår typografi. Dessa bildar tillsammans bilden och uppfattningen av varumärket Ridentity. Denna manual beskriver
Läs merFrontPage 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 merTeckenförrådet Grafisk profil
Teckenförrådet Grafisk profil Om den grafiska profilen Hur vi beter oss och ser ut styr i mångt och mycket hur vi uppfattas, alla har vi en personlig stil som signalerar vilka vi är, detta gäller även
Läs merProjekt 1 Webb- och inform ationsdesign
IT-universitetet MDI Interaktionsdesign Interaktionsdesign Grafiska gränssnitt 6p HT 03 Projekt 1 Webb- och inform ationsdesign Grupp 6 Theresa Harmanen, Linus Kjellqvist, Camilla Orrenäs, Emma Thunström
Läs merStruktanalys. Analys av strukturerade produkter. grafisk manual v1.0
grafisk manual v1.0 Innehåll: Inledning Varumärket... 3 Logotyp Grundregler & utföranden... 4 Tillämpning... 5 Luft & storlek... 6 Färgpalett Primära färger & komplementfärger... 7 Färgpalett... 8 Typsnitt
Läs merGrafisk design Varför grafisk design? öka synligheten ge klar affordance stödja en god mappning ge god feedback Varför grafisk design? skapa en smidig interaktion kan göra gränssnittet visuellt mer
Läs merInstruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2)
1 Instruktioner Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 2. Logga in (SIDA 2) 3. Hem (SIDA 2) 4. Skapa/redigera sidor (SIDA 3) 41. Lägg till ny sida (SIDA 3) 42. Avancerat (SIDA 4) 5. Texteditor (SIDA
Läs merSociala medier för företag
Sociala medier för företag Utbildningen ingår i projektet Helikoopter vilket är ett kompetensutvecklingsprojekt som finansieras av Europeiska socialfonden och genomförs i Coompanion Norr och Västerbottens
Läs merGrafisk manual Version 1.0
Grafisk manual 2 0 / Innehåll 1 / Introduktion 1.1 / Syfte 2 / Grafisk manual 2.1 / Logotyp 2.1.1 Logotypens sammansättning 2.1.2 Storlekar & friyta 2.1.3 Användning 2.1.4 Strapline 2.1.5 Operatörslogotyper
Läs merHemsida. Lathund för medlemsföreningar. Funktioner för medlemsföreningar på hemsidan. Syfte med medlemsföreningens sidor
Hemsida Lathund för medlemsföreningar 2015 10 13 Funktioner för medlemsföreningar på hemsidan Varje medlemsförening har en egen sektion på scuf.se Styrelsen kan redigera sin medlemsförenings sidor, skriva
Läs merTillämpad programmering CASE 1: HTML. Ditt namn
Tillämpad programmering CASE 1: HTML Ditt namn 18 [HTML] Din handledare vill se din skicklighet i att använda HTML-koden. Du ska utveckla en webbplats om ditt intresse, inriktning eller gymnasiearbete.
Läs merLathund länkar. Skapa en intern länk som en sida
Lathund länkar SiteVision hanterar enkelt olika typer av länkar: interna länkar (webbsidor som finns på egna webbplatsen) externa länkar (andras webbsidor) länkar till filer/dokument länkar till bilder
Läs merGränssnittsdesign Namn: Erik Kurs: Gränssnittsdesign Klass: Sy17. Projektplan. Projektets namn
Gränssnittsdesign 2018-01-15 Namn: Erik Kurs: Gränssnittsdesign Klass: Sy17 Projektplan Projektets namn (använd de punkter som är relevanta) 1. Projektbeskrivning Mål och Syfte Mål och syfte med produkten:
Läs merSovra i materialet. Vad är viktigt? Vad kan tas bort? Korta ner långa texter.
Sid 1 (6) Skriva för webb Att skriva för webben handlar om att skriva kort och enkelt för att fånga läsaren. Relevant innehåll Fundera över vad läsaren vill veta. Skriv för målgruppen. Sovra i materialet.
Läs merActiveBuilder Användarmanual
ActiveBuilder Användarmanual Forfatter: TalkActive I/S Dato: Juli 2004 Version: R. 1.01 Sprog: Svensk Copyright 2004 - Talk Active - all rights reserved. Innehåll: 1. INLEDNING...2 2. SNABBSTART...3 3.
Läs merKULTURRÅDET - EN INSPIRERANDE MYNDIGHET
2008-01-28 09.32 KULTURRÅDET - EN INSPIRERANDE MYNDIGHET Kulturrådet har i uppdrag att förverkliga de kulturpolitiska beslut som riksdag och regering fattat. Det är ett viktigt uppdrag och ett inspirerande
Läs mer3. Skapa sida 5. Hitta innehåll 6. Meny 7. Användare
3. Skapa sida 5. Hitta innehåll 6. Meny 7. Användare 2 Så här skapar du en ny sida. Mycket av informationen nedan kan tillämpas på skapandet av andra typer av innehåll, till exempel nyheter, blogginlägg,
Läs merGrafisk profil 2015 Uppdaterad senast 2015-01-13
Grafisk profil 2015 Uppdaterad senast 2015-01-13 Innehåll Vad är en grafisk profil?... 3 Färger... 4 Profilfärg...4 Komplementfärger...4 Gråtoner...4 Tilläggsfärger...4 Färgkoder...5 SciLifeLabs logotyp...
Läs merGrafisk manual Våren 2014 Besök vår webb: www.lillahjartatipitea.se Eller maila på: info@lillahjartatipitea.se Vår grafiska manual Här hittar du riktlinjer och praktiska exempel på hur vår profil ska användas.
Läs merGö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 merEllibot 1.0. Interaktivmedia Content Management System. Publicera för webben
Ellibot 1.0 Interaktivmedia Content Management System Publicera för webben Innehåll Logga in 3 Skapa en ny webbsida 4 o Publicering 5 o Information 5 o Standardfiler 6 o Innehåll 7 Hur man skapar en länk
Läs merDags 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 merGuide 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 merGö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 merWebbsidekurs 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 merManual - Introduktionskurs SiteVision
Manual Introduktionskurs SiteVision sidan 1 Manual Introduktionskurs SiteVision den 3 september 2014 09:00 Innehållsförteckning Logga in 2 Redigera text 3 Om bilder på ale.se 6 Lägga till en bild 7 Lägga
Läs merKom 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 merProjekt 1: Webb- & informationsdesign
IT-universitetet i Göteborg Projekt 1: Webb- & informationsdesign Annelie Günzel Jessica Göransson Anna Olvenmyr 2003-09-18 Yvonne Stenberg Grafiska Gränssnitt, 6 p Sofia Torberntsson MDI - Interaktionsdesign
Läs merHemsida. Lathund för medlemsföreningar. Funktioner för medlemsföreningar på hemsidan. Syfte med medlemsföreningens sidor
Hemsida Lathund för medlemsföreningar 2016-12-07 Funktioner för medlemsföreningar på hemsidan Varje medlemsförening har en egen sektion på scuf.se Styrelsen kan redigera sin medlemsförenings sidor, skriva
Läs merMANUAL FÖR ENHETLIG KOMMUNIKATION GRAFISK PROFIL
MANUAL FÖR ENHETLIG KOMMUNIKATION GRAFISK PROFIL Innehåll Logotyp 1.0 Den grafiska profilen syftar till att skapa en enhetlig visuell identitet för NB coachning. Den här manualen beskriver hur man arbetar
Läs merRACCOON DEVELOPMENT AB
INNEHÅLL NYHETER 2-4 ARTIKLAR 5-7 BANNERS 8-10 SIDOR 11-15 AVDELNINGAR 16-17 MENY 18-20 TIDNINGEN 21-23 MEDARBETARE 24-26 FÖRSTASIDAN 27-28 Sid 2 NYHETER Hantera nyheter För att lägga till nyheter - klicka
Läs merAPA 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 merGrafisk design Varför grafisk design? öka synligheten ge klar affordance stödja en god mappning ge god feedback Varför grafisk design? skapa en smidig interaktion kan göra gränssnittet visuellt mer
Läs merMisstag i webbdesign som gör att din hemsida ser klumpig ut
Misstag i webbdesign som gör att din hemsida ser klumpig ut Föreställ dig en tegel och motor butik där entrén är delvis blockerad, produkter dåligt organiserade, utan ordentliga skyltar. Skulle detta vara
Läs merVilken 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 merAxalon Process Navigator SP Användarhandledning
Axalon Process Navigator SP Användarhandledning Axalon Process Navigator SP 2013, senast reviderad: den 11 juni 2014 Innehåll Innehåll... 2 Om denna användarhandledning... 3 Syfte... 3 Vem är denna handledning
Läs merInnehåll. 3 Grafisk profil. 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek
Grafisk profil Innehåll 3 Grafisk profil 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek 6 Teckensnitt 7 Färger Profilfärger och kompletterande
Läs merPLÅT & VENTFÖRETAGEN Grafisk manual
08-762 75 85 info@pvforetagen.se www.pvforetagen.se Grafisk manual Manual Den här manualen är främst framtagen för alla som är anställda eller arbetar som leverantör till Plåt & Ventföretagen. Målet är
Läs merVad påverkar designen?
Vad påverkar designen av ett gränssnitt? Vi ser arbetet med design av ett användargränssnitt som något som liknar en arkitekts arbete. En arkitekt ska i sin utformning av en ny byggnad se till att: Byggnaden
Läs merANVÄNDARMANUAL CIRCUS
ANVÄNDARMANUAL CIRCUS Introduktion CIRCUS är en webbsida som stödjer det sociala samspelet mellan en person som har svårt att kommunicera och hens omgivning. På webbsidan kan du ladda upp personligt material
Läs merDesignmanual. Lunds Kommuns Fastighets AB
Designmanual Lunds Kommuns Fastighets AB 2010 Lunds Kommuns Fastighets AB (publ) Grafisk designmanual Version 1.0 2010 Innehållsförteckning En enhetlig grafisk profil stärker vår identitet Logotypen Färgerna
Läs merCopy Cat Laboration 4
Laborationsanvisning Copy Cat Laboration 4 Författare: Johan Leitet Version: 1 Datum: 2011-09-19 Inledning Vi kommer på denna laboration fortsätta med CSS och nu finslipa vår sida. Du kommer även att få
Läs merByalag.se Administrationsmanual
Byalag.se Administrationsmanual Snabbmeny: Återgå till huvudmenyn - Ladda hem Manual Skriv ut denna sida Inledning Du läser nu ett kompendie på hur man uppdaterar www.byalag.se på ett enkelt och smidigt
Läs merInnehållsförteckning. Logotyp 3. Logotyp mått 6. Färger 7. Grafiskt element 9. Typsnitt 10. Powerpointpresentation 11. Brevpapper 12.
Grafisk manual Innehållsförteckning Logotyp 3 Logotyp mått 6 Färger 7 Grafiskt element 9 Typsnitt 10 Powerpointpresentation 11 Brevpapper 12 Mailsignatur 13 Kuvert 14 Visitkort 15 Exempel i tryck 16 2
Läs merGRAFISKA RIKTLINJER. för Statskontoret. Version
GRAFISKA RIKTLINJER för Statskontoret Version 5. 2018-01-09 Innehåll Logotype svensk och engelsk Färgpalett Typografi Rapportomslag Annonsering Visitkort Logotype svensk och engelsk Logotypen förekommer
Läs merPublicera material i Learn
Publicera material i Learn Inne i kursrummet har du en ny meny till vänster. Har du arbetat i Fronter tidigare känner du igen dig rätt bra. Du kan publicera material i Kursinformation och i Kursmaterial.
Läs merVersion lättläst. Så här använder du Legimus app. för Android
Så här använder du Legimus app för Android Innehåll Vad är Legimus?... 3 Talsyntes... 3 Legimus webb... 3 Kom igång med appen Legimus... 4 Logga in... 4 Bokhyllan... 4 Så här söker du en talbok... 5 Ladda
Läs merManual för lokalredaktörer villaagarna.se
Manual för lokalredaktörer villaagarna.se Version 2 Villaägarnas Riksförbund Sollentuna 2011 Innehåll Redigera befintlig sida... 3 Skriva text eller klistra in kopierad text... 5 Rubriker i brödtext...
Läs merAnvä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 merGUIDE 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 merInledning. SPF Seniorerna Leksand Hemsida
SPF Seniorerna Leksand Hemsida 2017-06-13 Rev: B Under december 2016 har SPF bytt till ett nytt medlemsregister och hemsidessystem. Detta görs samtidigt eftersom de båda systemen utbyter information. Tyvärr
Läs merGrafisk Manual. House4Earth. Johanna Liljedahl Catarina Madsen Maja Olsson Lena Ström Matilda Åström
Grafisk Manual House4Earth Johanna Liljedahl Catarina Madsen Maja Olsson Lena Ström Matilda Åström Innehållsförteckning Förord Förord - Våra tankar - Den grafiska manualen Logotypen - Vår logotyp - Frizon
Läs merINTRODUKTION TILL LOGOTYPEN
INTRODUKTION TILL LOGOTYPEN Greppa Näringen logotypen är den officiella avsändaren och vårt viktigaste verktyg. Logotypen har en klar och tydlig form som syns mycket bra i alla sammanhang. För att skydda
Läs merLathund PDF-utskrift. Senselogic AB Version 2.3
Lathund PDF-utskrift Senselogic AB Version 2.3 Innehållsförteckning 1.1 PDF -utskrift... 3 1.1.1 Användningsområde... 3 1.1.2 Inställningar för PDF... 3 Fliken Allmänt... 3 Fliken Kapitel... 3 Fliken Formatmallar...
Läs merGlimåkra folkhögskola
grafisk manual Glimåkra folkhögskola Den grafiska manualen är överenskomna regler inom Glimåkra folkhögskola som anger hur vi bör kommunicera internt och externt. Manualen anger råd och riktlinjer för
Läs merIT-universitetet Göteborg Grafiska Gränssnitt Grafiska Gränssnitt. Inlämningsuppgift / Interaktions design. Författare: Cecilia Gustafsson
Grafiska Gränssnitt Inlämningsuppgift / Interaktions design Författare: Cecilia Gustafsson Inledning Tanken med den personliga uppsatsen är att fördjupa sig i eller vidare utveckla något ämne inom domänen
Läs merLathund länkar. Skapa en intern länk som en sida
Lathund länkar SiteVision hanterar enkelt olika typer av länkar: interna länkar (webbsidor som finns på egna webbplatsen) externa länkar (andras webbsidor) länkar till filer/dokument länkar till bilder
Läs merInställningstips. Visuella anpassningar Windows 10 2015-08-06
Inställningstips Visuella anpassningar Windows 10 2015-08-06 Innehåll Inledning... 3 Anpassa bildskärmen... 4 Ändra storlek för text, appar och andra objekt... 4 Ändra muspekare och markör... 6 Egenskaper
Läs merProgram för grafisk profil Ks/ 2018:140. kommunfullmäktige kommunstyrelsen övriga nämnder förvaltning. Fastställt av kommunfullmäktige
Program för grafisk profil Ks/ 2018:140 kommunfullmäktige kommunstyrelsen övriga nämnder förvaltning Program för grafisk profil Fastställt av kommunfullmäktige 2018-03-22 65 1 2 Program för GRAFISK PROFIL
Läs merInledning 4 6. Märke. Typsnitt 7 9. 10. Färger
GRAFISK PROFIL INNEHÅLL 3. Inledning 4 6. Märke Huvudmärke. Varianter. Tillämpning. 7 9. Typsnitt Huvudtypsnitt. Webbtypsnitt. 10. Färger Huvudfärger. Komplementfärger. Webbfärger INLEDNING Den grafiska
Läs merINFORMATION FRÅN VITEC. Dokumenthantering
INFORMATION FRÅN VITEC VITEC Dokumenthantering Vitec Express VITEC Affärsområde Mäklare www.vitec.se/maklare info.maklare@vitec.se GÖTEBORG: REDEGATAN 1 C, 426 77 V. FRÖLUNDA VÄXEL: 031-360 61 00 KALMAR:
Läs merSå här använder du Legimus app för Iphone och Ipad
Så här använder du Legimus app för Iphone och Ipad Innehåll Vad är Legimus?... 3 Legimus webb... 3 Kom igång med appen Legimus... 4 Logga in... 4 Bokhyllan... 5 Så här söker du en talbok... 5 Ladda ner
Läs merLogotyp. Regler & användning. Mars 2007
Logotyp Regler & användning Mars 2007 s varumärke Ett starkt varumärke ger positiva känslor och en föreställning hos mottagaren att den här organisationen vill jag tillhöra. Varumärket skapar intresse,
Läs merInternet. 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 merINLEDNING. 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 merInledning/innehållsförteckning. Hej!
WORDPRESS LATHUND Inledning/innehållsförteckning Hej! Det här är en lathund för dig som har en hemsida i Möcklenföreningarnas webbportal. Vi hoppas att den ska vara till hjälp. Är det något du inte förstår
Läs merGrafisk profil för Friskvården i Värmland
2015-01-09 Grafisk profil för Friskvården i Värmland En grafisk profil är ett grafiskt regelverk eller manual för hur allt tillhörande oss ska se ut. Gäller exempelvis för vilka färger och typsnitt som
Läs merGrafisk manual reviderad
EFFEKTIV KOMMUNIKATION. En väl genomtänkt, enhetlig och konsekvent tillämpad grafisk profil skapar igenkänning och tydlighet. En förutsättning för korrekt och konsekvent tillämpning av den grafiska profilen
Läs merManual 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 merRiktlinjer för Halmstads kommuns grafiska profil
Riktlinjer för Halmstads kommuns grafiska profil 1 Bakgrund Vår grafiska profil är ett av flera hjälpmedel för att stärka varumärket Halmstad. Den skapar en enhetlig och professionell bild av Halmstads
Läs merGRAFISK MANUAL. Hjälpreda för grafisk produktion
GRAFISK MANUAL Hjälpreda för grafisk produktion Förord Under verksamhetsåret 2008/2009 togs en ny logotyp och grafisk profil fram av PR-Utskottets Jonas Karlsson och Janne Poikulainen. Bakgrunden till
Läs merA R K E S FI NJ A LI R T G IKR
GRAFISKA RIKTLINJER INNEHÅLL 1 PROFILERING 2 LOGOTYPE 3 TYPOGRAFI 4 KORRESPONDENSMATERIAL 1PROFILERING PROFILERING ANVÄNDNING. Denna manual ska fungera som riktlinje för hur vi löpande arbetar med vår
Läs merWebbskribent @ Tjörn. Handläggare: Peter Olausson, webbmaster Datum: 2015-03-19. Tjörn Möjligheternas ö
Webbskribent @ Tjörn Handläggare: Peter Olausson, webbmaster Datum: 2015-03-19 Tjörn Möjligheternas ö Grundutbildning för skribenter på hemsidan och/eller intranätet Upplägg: Vi tar en titt på hur hemsidan
Läs merDESIGNDOKUMENT 1(8) 1. Idé & koncept. Grundidé, syfte & innehåll. Målgrupp, koncept & sammanhang
DESIGNDOKUMENT 1. Idé & koncept Grundidé, syfte & innehåll Vad önskar du att du gjort mer av, när du var 20? Finns det böcker som påverkat ditt liv på något sätt? Vilka låtar ska jag lyssna på för att
Läs merVÅR NYA PPT-MALL BESKRIVNING AV MALLEN OCH NÅGRA TIPS PÅ VÄGEN KICKI EDGREN / CHRISTEL COPP GÖTEBORGS UNIVERSITET
VÅR NYA PPT-MALL BESKRIVNING AV MALLEN OCH NÅGRA TIPS PÅ VÄGEN KICKI EDGREN / CHRISTEL COPP 2019-06-03 Lättare för dig bättre för dina åhörare Den nya mallen är framtagen utifrån två olika perspektiv användbarhet
Läs merMontania WebbPublicering administrerar din hemsida
S O F T W A R E & S O L U T I O N Montania WebbPublicering administrerar din hemsida Nu kan vi på Montania erbjuda dig ett enkelt webbverktyg för att underhålla din webbplats. Många webbsidor är idag svåra
Läs mer