Att planera en hemsidaMetoder, redskap och teorier

Webbdesign 100pMarcus Weiderstål

Bromma Gymnasium

Webbdesign: Att planera en hemsida 2

Ärligt talat, behöver man en hemsida?

Givetvis!Alla finns ju på webben!

Webbdesign: Att planera en hemsida 3

Mål för dagenKunna arbeta fram en hel arbetsplan för en

webbsidaKunna diskutera fördelar och nackdelar med

att välja olika former av text och bild för en specifik målgrupp

Ha kunskaper om olika syften och målgrupper

Ha utveckla ett ”helhetstänk” när det kommer till webbsidor

Webbdesign: Att planera en hemsida 4

Från idé till verklighet

Idé

Planering

Praktiskt arbete

Lansering

A goal without a plan is just a wish.Antoine de Saint-Exupery (1900 - 1944)

Webbdesign: Att planera en hemsida 5

Idé

”Jag ska göra en hemsida för alla som gillar bävrar”

”Jag ska göra en hemsida som berättar hur dåliga Djurgården är”

”Mitt företag behöver finnas på internet”

”Jag borde börja blogga om min skosamling”

”Varför finns det ingen hemsida för oss som älskar röda fåtöljer?”

”Det borde finnas någon form av mötesplats för oss som gillar dukar”

”Jag vill tjäna pengar!”

Webbdesign: Att planera en hemsida 6

Vi borde göra en

hemsida om vår

heminredning!

Vi borde göra en hemsida om

vårt hemmabiossyte

m!

Webbdesign: Att planera en hemsida 7

Planering!Lägger grunden till hemsidan.Ger förståelse för arbetet med hemsidanGör hemsidan ”enad”.Hjälper webbdesignern att utveckla

hemsidan när personen vet vad syftet är och vem som ska besöka den!

Webbdesign: Att planera en hemsida 8

Arbetsplan

Webbutvecklarens motsvarighet till affärsplan

Webbdesign: Att planera en hemsida 9

ArbetsplanSyfte Målgrupp

Innehåll

Struktur(Flödesschema)

Text Bilder/Animationer/Video

Grafisk profil Marknadsföring Applikationer

Webbdesign: Att planera en hemsida 10

SyfteVarför skapar vi denna hemsida?• Personlig/åt ett företag• Tjäna pengar (e-handel)• Sammanfoga personer med samma intresse• Marknadsföra vår förening/idrottslag• Tillfällig reklam för en produkt eller projekt.

Vad är det slutgiltiga målet med hemsidan?• Bli stenrik!• Få ut vårt budskap• Sälja mer av en viss vara• Få folk att sluta heja på Djurgården

Diskutera:Vad är syftet med vår

hemsida ”Välj Webbdesign”?

Webbdesign: Att planera en hemsida 11

MålgruppVilka ska besöka hemsidan?• Alla som gillar bävrar• Folk som vill lära känna andra med samma

intresse (ex: bävrar)• Tjejer mellan 13-18• Folk som vill tävla/veta mer om en specifik

produkt.

Hur fångar vi upp denna målgrupp?

Webbdesign: Att planera en hemsida 12

InnehållSka vi använda oss av mycket text/artiklar?Ska vi fokusera på bilder?Ska vi fokusera på

animationer/grafik/flash/film? (vanligt inom reklam)

Webbdesign: Att planera en hemsida 13

StrukturHur ska vi strukturera upp hemsidan?På servern?I webbläsaren?

Diskutera:Hur ser strukturen ut på

Aftonbladet.se?Hur skiljer den sig från

blondinbella.se?

Webbdesign: Att planera en hemsida 14

Flödesschema (I) Startsida

n

•Nyheter

•Arkiv•Bild

1, bild 2, bild 3 mm

Nyheter

•Om mig

•Utbildning

•CV

Om Mig

Webbdesign: Att planera en hemsida 15

Flödesschema (II)

• Stycke 1• Stycke 2• Bild 2• Bild 3• Länk 1 (Mål: Om

mig)

Startsida

• Nyhet 1• Nyhet 2 • Film 1 (Från

youtube)

Nyheter

• Text• CV• Utbildning• Fin bild på mig

Om Mig

Meny

Webbdesign: Att planera en hemsida 16

TextFokus: Text eller bilder?Vad är bra text för internet?Vad för roll spelar målgruppen?

Webbdesign: Att planera en hemsida 17

Exempel (I): Aftonbladet

Webbdesign: Att planera en hemsida 18

Exempel (II): BlondinBella

Webbdesign: Att planera en hemsida 19

Att tänka på för text på internetKort och sakligtInga onödiga ord (Ranelidska går fett bort på

Internet)LuftigtRätt fontRubrikerUnderrubrikIngressTabeller

Webbdesign: Att planera en hemsida 20

Bilder/Animationer/FlashVad är målgruppen?Vad vill vi uppnå med våra bilder?

Webbdesign: Att planera en hemsida 21

Exempel (I): Bild från Aftonbladets artikel

Webbdesign: Att planera en hemsida 22

Exempel (II): Bild från BlondinBellas blogginlägg

Webbdesign: Att planera en hemsida 23

Grafik profilHur ska sidan se ut designmässigt? Hur skapar vi en grafisk profil som är

enhetligt?

Webbdesign: Att planera en hemsida 24

Hemsida

Visitkort

Arbetskläder

Dokumentmallar

Arbetsplats

Etik/värderingar

Grafisk profil

Webbdesign: Att planera en hemsida 25

Marknadsföring

Du alltså, hade vi inte tänkt ha

några besökare på snigeldate.se?

Ööö asså, räcker

inte google?

Webbdesign: Att planera en hemsida 26

MarknadsföringBannersSociala medier”In real life”…?

Webbdesign: Att planera en hemsida 27

Den logiska kopplingen!Marknadsföring

Grafisk profil

Webbdesign: Att planera en hemsida 28

Marcus magiska hemsideformel Asbra idé!

Sjukt bra arbetsplan!

Perfekt kodad och designad

Webbdesign: Att planera en hemsida 29

Sammanfattning

Webbdesign: Att planera en hemsida 30

Instuderingsfrågor