Presentation laddar. Vänta.

Presentation laddar. Vänta.

25 1 Webben som medium Sus Lundgren. 25 2 Webb: Fördelar Lätt & snabb publicering Information lättillgänglig & föränderlig –Dynamiskt medium Inga begränsningar.

Liknande presentationer


En presentation över ämnet: "25 1 Webben som medium Sus Lundgren. 25 2 Webb: Fördelar Lätt & snabb publicering Information lättillgänglig & föränderlig –Dynamiskt medium Inga begränsningar."— Presentationens avskrift:

1 25 1 Webben som medium Sus Lundgren

2 25 2 Webb: Fördelar Lätt & snabb publicering Information lättillgänglig & föränderlig –Dynamiskt medium Inga begränsningar avseende –Sidantal –Färger –Bilder Hypermedia –tillåter korsreferenser etc  Har man jobbat med tryck är allt detta en lättnad!!!

3 25 3 Webb: Nackdelar Ingen kontroll över läsordning – svårt att skapa en helhet Hypermedia –Spaghetti! –Länkar till och från andra webbplatser Informationsröta Trovärdighet Olika utseende för olika användare Begräsningar i form av –Bandbredd –Webbläsarinställningar

4 25 4 Webb: Utmaningar! Hur anpassar man designen till olika inställningar? –Upplösning –Skärmstorlek –Fönsterstorlek Vilka minimikrav kan man ställa? –Insticksprogram (Flash, PDF-läsare, Java- stöd etc...) –Webbläsare & operativsystem –Bandbredd – vad är ”maxväntetid”

5 25 5 Webb: Utmaningar! Vilken är målgruppen/-grupperna? Hur skall man ”fånga” besökarna –Unikt innehåll –Unika tjänster Hur skiljer man sig från liknande webbplatser?

6 25 6 Webb: Designfrågor Webbdesignerns viktigaste fråga: Vad vill jag ha sagt och till vem? En webbplats kan/bör innehålla –Information –Tjänster –Underhållning Innehållet måste anpassas efter målgruppen och i viss mån avsändaren –Glöm inte att anpassa språket! Utseendet måste anpassas efter innehållet, målgruppen och avsändaren –Det måste vara konsekvent och ge en tydlig ”look & feel”

7 25 7 Webbdesign: Tänk på! Fokusera på målgruppen –Personas/intervjuer/fördomar (bättre än att utgå från sig själv?) Om det finns flera målgrupper skall de rangordnas! Navigationsstrukturen skall vara –Tydlig/begriplig –Konsekvent Ett nyckelord för god webbdesign är konsekvens –I navigation och funktionalitet –I utseende –I språk

8 25 8 Informationsdesign Hur skall informationen struktureras? –Hur återspegla innehåll och budskap? –Vilken uppdelning är mest logisk och mest lättnavigerad? Grund och bred eller smal och djup struktur? –Vana ”surfare” föredrar breda men grunda strukturer med många förstahandsval –Ovana ”surfare” vill ha djupa steg-för- steg-strukturer Hur mycket ”hopp” mellan grenarna skall tillåtas?

9 25 9 Men hur gör man? Bestäm vilka sidor som skall finnas och vad de skall innehålla Bestäm utifrån detta hur strukturen på webbplatsen skall se ut Bestäm utifrån detta hur navigationen skall se ut och fungera

10 25 10 Men hur gör man? Skapa innehåll, och/eller webbanpassa befintligt material Gör några utkast till grafisk design –Tänk på uttryck och kontinuitet! –Finns det olika typer av sidor (ex. ”vanliga sidor och sidor som beskriver projekt) som kräver olika layout? –Vilken tabellstruktur har de? Skapa en mallsida och idiotkolla att allt stämmer på den Skapa nya sidor utifrån mallsidan Fyll dem med innehållet Testa att alla länkar etc fungerar

11 25 11 Navigation Skall återspegla informationsdesignen Skall vara konsekvent Ska indikera systemstatus: var är jag? Kan göras på flera sätt –Breadcrumbs, ex ”Produkter – böcker – thrillers” –Överskrifter –Grafiskt: Ikoner / Färger

12 25 12 Navigation i praktiken Gruppera element mha –Närhet –Likhet i form eller färg –Jämn fortsättning (rader el kolumner) Vi kan hålla 5 – 7 ”informationsbitar” i minnet MEN... –Vi kan känna igen fler val –Flera bitar kan ”chunkas” till en (ex 2,8,4,7,7,3 kan slås ihop till 28, 47, 73) Glöm inte att testa! –Exempel...

13 25 13 Utseende Färgval –Hellre för få färger än för många –Om färgkodning bär navigationen måste man färgblindstesta Illustrationer –Försök använda en typ av bilder; foton (svartvita?!) eller teckningar eller akvareller eller...! Glöm inte ”luft”; vita ytor Det är vanligt att man skapar webbdesignen i något ritprogram innan man ger sig på att HTML-koda den

14 25 14 Bilder En bilds storlek (i kb) beror av –”Fysisk” storlek –Upplösning –Antal färger Det är ”gratis” m.a.p. nedladdningstid att använda samma bild om och om igen på olika sidor. Webben stödjer tre filformat –GIF: lämpligt för bilder med få färger och skarpa linjer, ex loggor. Stödjer transparens. –JPEG: lämpligt för foton. Förstörande. –PNG: ”mittemellan”. Stödjer transparens.

15 25 15 Text Grundläggande typografi för webb skiljer sig från den för tryck –Tänk på att typsnitt blir olika stora beroende på webbläsare och operativsystem! –Linjära typsnitt är att föredra –Seriftypsnitt fungerar bara i stora storlekar –Lugna, helst enfärgade bakgrunder som kontrasterar lagom mycket mot texten –Länkar i en annan färg än brödtextens Blå är ”standard” länkfärg

16 25 16 Text i praktiken Texter bör generellt sett vara kortare på webben än i tryckta media –Mindre tålamod hos läsaren –Svårare att läsa på skärm Långa dokument i flera versioner –Utskriftsversion –Ankarlänkad innehållsförteckning –Uppdelat på flera sidor

17 25 17 Tabeller Tabeller är det osynliga layoutverktyget Används för att… –Skapa luft –Positionera saker i förhållande till varandra –Skapa spalter Man har ofta tabeller i tabeller De består av ett visst antal rader och kolumner –En kolumn kan fårs att spänna över en eller flera rader och vice versa 

18 25 18

19 25 19

20 25 20 Gott & Blandat Håll koll på sidans storlek i kb Glöm inte att ge sidor titelrubriker Ange nyckelord som metainformation –Underlättar för sökmaskiner Kontaktinformation skall alltid finnas lättillgänglig Namnge bilder –Underlättar för blinda användare –Extra viktigt om navigationen utgörs av bilder Ramar (”frames”/delfönster) eller inte? –Lättare att underhålla –Svårare att bokmärka

21 25 21 Webb: Funktionalitet Extranät, intranät och forum skiljer sig från ”vanliga” webbplatser genom att erbjuda mer funktionalitet De har ofta en annan typ av innehåll –Nedladdningsbara dokument, filer etc –Kan oftast läggas till av alla användare Flergångsanvändare mycket vanligare –Det kan vara ok att lägga in komplex funktionalitet som är nyttig men tar tid att lära sig Ofta rättighetssystem Ofta olika målgrupper –Ex säljare/ekonomer/administratörer etc

22 25 22 Webb: Funktionalitet Ofta vill man på något vis koppla en eller flera databaser till ett webbgränssnitt –E-handel –Publiceringssystem –Användarrättigheter Dessvärre lämpar sig webben inte så väl för komplexa användargränssnitt där mycket information skall matas in –Svårt att få exakt kontroll över layout –Svårt vid omladdning av sidan –Inga avdelare i dropdown-menyer –Mycket begränsad mängd ”färdiga” objekt som kan användas

23 25 23 Webb: Programmering Funktionalitet medför programmering –Java, PHP, VBScript, Python, Perl...! –HTML-mallar för olika typer av info/sidor –Mellanlager med kod som hämtar informationen och presenterar den Kräver insikt i hur de bakomliggande systemen fungerar –Hur kommunicera med databasen? –På vilket sätt skickas och bokförs exempelvis en order?

24 25 24 Bra-ha-länkar Basics i HTML –http://www.davesite.com/webstation/ html/ –http://www.htmlgoodies.com/primers/ basics.html Dreamweaver –Macromedias egen tutorial: dreamweaver/productinfo/tutorials/gettings tarted/

25 25 Bra-ha-länkar Om webbdesign –Web Page Design for Designers (i synnerhet högerspalten): –Vincent Flanders’ avskräckande exempel: Usability –Jakob Nielsen: –Usable Web, länksamling:


Ladda ner ppt "25 1 Webben som medium Sus Lundgren. 25 2 Webb: Fördelar Lätt & snabb publicering Information lättillgänglig & föränderlig –Dynamiskt medium Inga begränsningar."

Liknande presentationer


Google-annonser