Modul 7

Kap 7.6 - Planera en webbplats

En tydlig plan gör det lättare att bygga rätt sida från början.

Mål

  • Formulera syfte och målgrupp för en webbplats.
  • Välja vilket innehåll som behövs.
  • Skissa en enkel struktur innan kodningen börjar.

Syfte och målgrupp

Börja med att svara på två frågor: varför ska sidan finnas och vem ska använda den? En portfoliosida, en föreningssida och en informationssida behöver olika innehåll och ton.

Om du bygger en riktig webbplats behöver du ofta återkoppla med en kund eller beställare under arbetet. I ett skolarbete kan du tänka på samma sätt: kontrollera tidigt att sidans syfte, innehåll och struktur faktiskt passar uppgiften.

Definiera mål och innehåll

Innan du börjar koda behöver du veta vad webbplatsen ska göra. Det är lätt att fastna i färger, effekter och layout för tidigt, men först behöver du förstå uppgiften.

  • Vilken typ av webbplats är det: portfolio, blogg, föreningssida, webbshop eller informationssida?
  • Vad ska besökaren kunna göra?
  • Ska användare kunna kommentera, kontakta dig eller skapa konto?
  • Kommer sidan mest innehålla text, bilder, video eller formulär?
  • Vilken information är viktigast att hitta snabbt?

Svaren hjälper dig att välja struktur. En webbshop behöver till exempel produktlistor, varukorg och tydliga köpflöden. En portfoliosida behöver snarare projekt, presentation och kontaktväg.

Innehåll före detaljer

Skriv ner vilka delar sidan behöver: rubriker, texter, bilder, länkar, formulär och kontaktinformation. När innehållet är tydligt blir det enklare att välja layout.

Försök skriva riktigt innehåll tidigt. Om du bara fyller sidan med tomma rutor eller låtsastext kan layouten se bra ut först, men gå sönder när riktiga rubriker, bilder och textmängder läggs in.

En enkel sitemap

En sitemap visar vilka sidor eller sektioner som ingår och hur de hänger ihop. För en liten webbplats kan det räcka med startsida, om-sida, projekt och kontakt.

Du kan göra en sitemap i Figma, diagrams.net, Google Teckningar eller bara på papper. Det viktiga är att du ser hur sidorna hänger ihop och vad som ska finnas i navigationen.

Startsida
├── Om
├── Projekt
│   ├── Projekt 1
│   └── Projekt 2
└── Kontakt

Skapa wireframes

En wireframe är en enkel skiss av layouten. Den visar ungefär var header, navigation, innehåll, bilder, knappar och footer ska ligga. Den behöver inte ha färdiga färger eller snygga detaljer.

Skapa gärna minst två versioner: en för desktop och en för mobil. Då ser du tidigt om innehållet fungerar på olika skärmstorlekar.

  • Desktop: hur ser sidan ut på bred skärm?
  • Mobil: vad hamnar först när allt ligger i en smal kolumn?
  • Navigation: är det lätt att hitta vidare?
  • Prioritet: syns det viktigaste innehållet tidigt?

Bygg startsidan först

När planeringen är klar kan du börja med startsidan i HTML och CSS. Startsidan sätter ofta grunden för navigation, färger, typsnitt och layout.

  1. Skapa HTML-strukturen för startsidan.
  2. Lägg in navigationen och kontrollera att länkarna fungerar.
  3. Skriv riktig rubrik och riktigt innehåll.
  4. Lägg till CSS för layout, färger och typografi.
  5. Testa i både smal och bred viewport.
  6. Validera och felsök ofta.

Skapa övriga sidor

När startsidan fungerar kan du skapa resten av sidorna. Försök hålla designen konsekvent: samma navigation, samma typ av footer, samma rubriknivåer och liknande avstånd.

Det betyder inte att alla sidor måste se exakt likadana ut, men användaren ska känna igen sig.

Lägg in media sist när strukturen fungerar

Bilder, video och ljud kan göra sidan bättre, men de kan också göra den tung och rörig. Lägg in media när du vet var det passar och optimera filerna innan publicering.

  • Använd rätt bildformat.
  • Minska onödigt stora bilder.
  • Skriv alt-text när bilden behöver beskrivas.
  • Kontrollera att media inte förstör mobilvyn.

Testa med andra personer

Låt någon annan testa sidan. Ge personen enkla uppdrag, till exempel:

  • Hitta kontaktinformationen.
  • Hitta ett visst projekt.
  • Öppna sidan på mobil och läs första avsnittet.
  • Försök använda navigationen utan hjälp.

Titta på vad testpersonen faktiskt gör. Om personen inte hittar något som du tycker är uppenbart är det ofta sidan som behöver bli tydligare.

Planeringschecklista

  • Jag vet vad webbplatsen ska uppnå.
  • Jag vet vem sidan är till för.
  • Jag har listat vilket innehåll som behövs.
  • Jag har gjort en enkel sitemap.
  • Jag har skissat layout för desktop och mobil.
  • Jag har tänkt på tillgänglighet, filstorlek och integritet.
  • Jag har en plan för testning innan publicering.

I nästa kapitel arbetar du vidare med skiss eller Figma innan du går över till kod.