F-rberedande-grupp-uppgift-Fredag-21-2

Förberedande Gruppuppgift – Boiler Room v 8 Fredag 21/2

Introduktion till vecka 9: UI-ramverk, Designprinciper & Dokumentation

---

🏆 Syfte och mål med uppgiften:

• Ge en praktisk förberedelse inför nästa veckas tema kring UI-ramverk, designprinciper och dokumentation.
• Introducera verktyg och arbetsflöden som kommer vara centrala i ert nästa projekt.
• Öva på att samarbeta i grupp med fokus på layout, UI-komponenter och dokumentation.

---

📋 Uppgift: Bygg en startsida med komponenter & README

🛠️ Del 1 – Utforska och välj UI-ramverk (09.00 – 09.30)

Gruppen börjar med att tillsammans:

1. Utforska minst två UI-ramverk:

   • Tailwind CSS
   • Material UI (MUI)
   • Bootstrap
   • Shadcn/ui

2. Diskutera i gruppen:

   • Vad verkar enklast/smidigast att komma igång med?
   • Välj ett UI-ramverk att arbeta vidare med under uppgiften.

---

🎨 Del 2 – Skissa en enkel startsida i Figma (09.30 – 10.30)

• Skapa en enkel skiss (low fidelity) över en startsida i Figma (eller på papper).
• Fokusera på att applicera designprinciper:
  • Visuell hierarki: Vad ska synas mest?
  • Alignment: Rada upp komponenter konsekvent.
  • Färg och kontraster: Är text lättläst? Tillgängligt för alla?
    (Tips: använd WebAIM Contrast Checker)
  • Typografi: Läsbarhet och enhetlighet i typsnitt och storlek.
  • OBS lägg inte för mycket tid på denna del, det viktigaste är att ni kommer igång med att sätta upp repot och börjar jobba med UI-ramverk.

📖 Figma-guide för nybörjare:
https://help.figma.com/hc/en-us/articles/360040514513-Getting-Started-with-Figma

---

💻 Del 3 – Bygg upp startsidan med valt UI-ramverk (10.30 – 12.00)

• Sätt upp ett nytt projekt med Vite:

  npm create vite@latest

• Installera det valda UI-ramverket (se deras dokumentation för installationsinstruktioner).
• Bygg startsidan enligt er skiss:
  • Header
  • En eller två sektioner med text och knappar.
  • Footer

Fokus:

• Lägg tid på struktur och förståelse för ramverket – det behöver inte bli "klart".
• Lär av varandra – hjälps åt i gruppen.
• Reflektera över hur ramverket påverkar design och utvecklingsflödet.

---

📄 Del 4 – Skriv en enkel README (12.00 – 12.30)

• Skriv en första version av en README-fil för ert projekt:
  • Kort projektbeskrivning.
  • Vilket UI-ramverk ni använde och varför.
  • Hur man startar projektet (t.ex. npm install och npm run dev).
  • Gruppmedlemmar.

📖 Exempel på bra README:
https://github.com/matiassingers/awesome-readme

---

🎙️ Avslutning och reflektion (vid passets slut eller efter lunch)

Varje grupp går igenom:

• Vad hann ni med?
• Vad tyckte ni om ramverket?
• Vad var enkelt/svårt?

---

📚 Resurser att använda under uppgiften:

UI-ramverk:

• Tailwind CSS
• Material UI (MUI)
• Bootstrap
• Shadcn/ui

Designprinciper och inspiration:

• Visuell Hierarki – Medium
• UI Color Guide – Medium
• WebAIM Contrast Checker
• Mycket användbart webbläsartillägg för att kolla konstraster för specifika element

Figma för skisser:

• Getting Started with Figma

---

📝 Inlämning (frivillig):

• Ladda upp ert repo på GitHub om ni vill spara det som grund inför det individuella projektet.
• Det viktiga är att README är påbörjad – dokumentationen är en central del av nästa veckas tema.

---

🏁 Målet med uppgiften är inte att bli klar, utan att:

• Utforska ett UI-ramverk och testa komponenter.
• Planera och bygga upp en enkel layout.
• Förstå grunderna i README och dokumentation.
• Förbereda inför det individuella projektet vecka 9.

---

🎯 Lycka till med uppgiften!