Modul 7 · Kapitel 7.6
Planera en webbplats
En tydlig plan gör det lättare att bygga rätt sida från början.
Mål
Efter kapitlet ska du kunna...
- formulera webbplatsens syfte och målgrupp
- välja vilket innehåll som behövs
- göra en enkel sitemap
- skissa struktur före kodningen
Börja med varför
Planen styr bygget
Börja inte med färger och effekter innan du förstår uppgiften.
Två grundfrågor
Syfte och målgrupp
Svaren påverkar innehåll, språk, funktioner och layout.
Återkoppling
Kontrollera planen tidigt
I ett riktigt projekt behöver du ofta stämma av med en kund eller beställare.
I ett skolarbete gör du samma sak genom att kontrollera att syfte, innehåll och struktur passar uppgiften.
Typ av webbplats
Olika mål kräver olika innehåll
Interaktiv planering
Byt webbplatstyp
Syfte: visa vem du är och vad du kan.
- Projekt
- Kort presentation
- Kontaktväg
Definiera webbplatsen
Frågor före kod
- Vad ska besökaren kunna göra?
- Behövs kommentarer, kontakt eller konto?
- Blir innehållet främst text, bilder, video eller formulär?
- Vilken information måste hittas snabbt?
Två exempel
Strukturen följer syftet
| Webbshop | Portfolio |
|---|---|
| Produktlistor | Projekt |
| Varukorg | Presentation |
| Köpflöde | Kontaktväg |
Innehåll först
Lista vad sidan faktiskt behöver
När innehållet är tydligt blir layouten lättare att välja.
Riktigt innehåll
Låtsastext kan dölja problem
| Tomma rutor och kort låtsastext | Riktiga rubriker och textmängder |
|---|---|
| Layouten ser enkel ut. | Visar hur sidan faktiskt behöver fungera. |
| Problem upptäcks sent. | Problem upptäcks under planeringen. |
Sitemap
En karta över webbplatsen
En sitemap visar vilka sidor eller sektioner som ingår och hur de hänger ihop.
Den hjälper dig att planera navigationen innan du bygger den.
Exempel på sitemap
En liten portfoliosida
Verktyg
En sitemap behöver inte vara avancerad
Det viktiga är att relationerna mellan sidorna syns.
Wireframe
En enkel skiss av layouten
- Visar placering av header och navigation.
- Visar innehåll, bilder och knappar.
- Visar footer och sidans viktigaste områden.
- Behöver inte ha färdiga färger eller detaljer.
Två wireframes
Desktop och mobil
Prioritet
Mobilen tvingar fram en ordning
- Vad ska användaren se först?
- Vilket innehåll kan komma längre ner?
- Hur fungerar navigationen i en smal kolumn?
- Syns det viktigaste utan onödigt letande?
Bygg startsidan först
Från struktur till färdig grund
- Skapa HTML-strukturen.
- Lägg in navigation och testa länkar.
- Skriv riktig rubrik och riktigt innehåll.
- Lägg till CSS för layout och typografi.
- Testa smal och bred viewport.
- Validera och felsök.
Övriga sidor
Konsekvens skapar igenkänning
- Samma navigation
- Samma typ av footer
- Konsekventa rubriknivåer
- Liknande avstånd och visuella mönster
Sidorna behöver inte vara identiska, men användaren ska känna igen sig.
Media
Lägg in bilder och video när strukturen fungerar
- Välj rätt format.
- Minska onödigt stora filer.
- Skriv alt-text när den behövs.
- Kontrollera mobilvyn.
Media ska stödja innehållet, inte göra sidan tung och rörig.
Användartest
Låt någon annan prova
Du känner redan till sidan och vet var allt finns. En testperson gör inte det.
Titta på vad personen faktiskt gör – förklara inte vägen i förväg.
Testuppgifter
Ge konkreta uppdrag
- Hitta kontaktinformationen.
- Hitta ett visst projekt.
- Öppna sidan på mobil och läs första avsnittet.
- Använd navigationen utan hjälp.
Om testpersonen inte hittar något behöver sidan ofta bli tydligare.
Planeringschecklista
Innan kodningen fortsätter
- Syfte och målgrupp är tydliga.
- Innehållet är listat.
- Sitemap är skapad.
- Desktop och mobil är skissade.
- Tillgänglighet, filstorlek och integritet är genomtänkta.
- Det finns en plan för testning.
Sammanfattning
Kom ihåg
- Börja med syfte och målgrupp.
- Planera riktigt innehåll före detaljerad layout.
- En sitemap visar webbplatsens struktur.
- Wireframes visar layout för desktop och mobil.
- Bygg startsidan och återanvänd en konsekvent grund.
- Testa med andra innan publicering.