Börja skriva för att söka…

Projekt: fiktivt CV

Uppdraget: från idé till färdig webbsida

Skapa ett professionellt CV för en fiktiv karaktär. Du ska ansvara för hela kedjan: research, planering, produktion och kvalitetssäkring.

Processen

  1. Inspiration: Sök på nätet efter “Creative CV web design” eller “Minimalist CV”. Vad fungerar? Vilka rubriker använder de?

  2. Välj karaktär och gör brand-analysen: Välj en fiktiv karaktär och bestäm designens riktning innan du öppnar färgväljaren.

    • Skriv ned 3 adjektiv som beskriver karaktärens personlighet. Batman: diskret, mörk, effektiv. Deadpool: kaotisk, kaxig, ironisk.
    • Identifiera vilken av de fyra stilarna som passar: Fancy/Luxury, Quirky/Offbeat, Friendly/Casual eller Techie/Scientific.
    • De adjektiven styr dina färgval. Utan dem väljer du hex-koder slumpmässigt. Du kan med fördel titta på färgers symbolik och vad olika färger signalerar.

  3. Skiss (Wireframe): Skissa din layout på papperslappar innan du öppnar VS Code.

    • Desktop-vy (16:9): Liggande lapp.
    • Mobil-vy (9:16): Stående lapp.
    • Landmärken: Skriv ut var <header>, <nav>, <main> och <footer> ska placeras.
    • Brand-adjektiven: Skriv dem på pappret. Markera var karaktärens profilfärg ska synas.

    Det är 100 gånger snabbare att sudda på ett papper än att skriva om CSS för att du “ångrade layouten”. Använd samma adjektiv och stilpersonlighet som du analyserade i Designstilar, fast nu för din fiktiva karaktär. Kör du fast på vad du ska rita, titta på de tre layouterna längre ned.

  4. Fixa bilderna: Profilbilden sparas som WebP och hålls under 100 KB, samma Squoosh-flöde som i Bildformat & upphovsrätt. Ikoner som SVG, och dokumentera källa och licens i din README.

  5. Deploy: Publicera på GitHub Pages.

Tre layouter du kan bygga nu

Skisserna nedan är wireframes, alltså strukturskisser. De visar var sakerna ligger, ingenting annat. Färg, typsnitt och karaktär kommer från din brand-analys, inte härifrån, och två CV byggda på samma wireframe ska inte se likadana ut.

Alla tre går att bygga med det du kan i dag: Containern, Sidebaren, Nav-receptet och Centreraren från Receptsamlingen. Välj en av dem, eller rita en egen som kombinerar bitar ur flera.

Wireframe: enkolumnslayout i desktopvy och mobilvy. Porträtt, namn och kontaktrad centrerade högst upp, därefter avsnitten Om mig, Erfarenhet och Utbildning staplade under varandra.Desktop 16:9Mobil 9:16Om migErfarenhetUtbildningOm migErfarenhetUtbildning
1. Enkolumn. Containern och ingenting annat. Porträtt, namn och kontaktrad centrerade högst upp, sedan avsnitten under varandra. Mobilvyn är i princip densamma, vilket är hela poängen: det finns ingenting som kan gå sönder.
Wireframe: tvåkolumnslayout med smalt sidofält till vänster för porträtt, kontakt och kompetenser, och en bred huvuddel till höger. I mobilvyn ligger sidofältet överst och huvuddelen under.Desktop 16:9Mobil 9:16KontaktKompetenserOm migErfarenhetUtbildningOm migErfarenhetUtbildning
2. Sidofältet. Sidebar-receptet rakt av: det korta till vänster, det långa till höger. På mobilen staplar sig kolumnerna av sig själva, utan en enda media query.
Wireframe: bred banner-header med namn till vänster och kontaktrad till höger, därunder ett smalt sidofält bredvid en bred huvuddel, och en footer längst ned. I mobilvyn ligger allt staplat.Desktop 16:9Mobil 9:16KompetenserErfarenhetUtbildningErfarenhetUtbildning
3. Banner över sidofältet. Två recept staplade: en bred header med namnet till vänster och kontaktraden till höger, och under den Sidebaren. Den här liknar ett riktigt CV mest, och den är fortfarande bara recept.

Vill du ha sidofältet till höger byter du plats på <aside> och <main> i HTML:en, receptet är detsamma. Tänk bara på vad det gör med mobilvyn: kolumnerna staplar sig i den ordning de står i koden, så ett sidofält till höger hamnar under huvudinnehållet på telefonen. För ett CV är det oftast rätt, läsaren får erfarenheten först och kontaktuppgifterna sist.

Tekniska krav

  • Semantik: Korrekt hierarki (h1-h3) och landmärken.
  • Layout: Sidebaren eller Containern kan användas, och Centreraren för profilbilden och kontaktraden.
  • Media: Optimerad profilbild (WebP) och ikoner som SVG.
  • README: Dokumentera din process, källor för bilder och licenser (CC0/Copyright).
  • Komponenter (frivilligt men rekommenderat): Ge sidofältet karaktär med Runda porträttet och Skillbaren från Receptsamlingen. Där hittar du också Containern och Nav-receptet om du behöver friska upp dem.

Kvalitetssäkring: verifieringsprotokollet

Innan inlämning SKA du genomföra följande tester och dokumentera resultatet i din README:

  1. W3C Validator: Validator.nu, inga röda fel.
  2. WAVE Test: Kör WAVE-tillägget. Inga “Errors” (röda ikoner). Kolla särskilt att dina landmärken syns korrekt.
  3. Slow 3G: Testa sidan med “Throttling” i Network-tabben.

Klistra in den här checklistan i din README och bocka av medan du testar:

## Testprotokoll

- [ ] Validator.nu: 0 röda fel
- [ ] WAVE: 0 errors, landmärkena ser rätt ut
- [ ] Slow 3G: sidan är användbar, texten syns direkt
- [ ] Mobilvy: sidofältet staplar sig, inget skjuter utanför skärmen

Vanliga fel

  • Layout-kollaps: Att inte testa sidan på en riktig mobil. Saker som ser bra ut på desktop kan vara oläsbara på en liten skärm.
  • Kontrast-missar: Att välja en färgkombination som WAVE flaggar för. Laga det direkt genom att välja en mörkare/ljusare nyans.
  • “Glömda” bilder: Trasiga sökvägar på grund av slarv med stora/små bokstäver (Case-sensitivity).

Uppgift: Inlämning: Fiktivt CV

Detta ska lämnas in

  1. Dina skisser: Foto på dina papperslappar (16:9 och 9:16).
  2. Länk till ditt GitHub-repo (med testprotokollet i din README).
  3. Länk till din live-sida via GitHub Pages.

Kvalitetsstämpel

En godkänd leverans är validerad, tillgänglighetsanpassad och optimerad. Inget “halvfabrikat” accepteras.

Motivera & reflektera

Avsluta din README med en kort utvärdering. Koppla tre konkreta designval (färg, typsnitt, layout) till dina tre adjektiv: varför blev det så här? Skriv sedan en mening om vad du skulle förbättra om du hade en dag till. Den här motiveringen är skillnaden mellan ett CV som “ser snyggt ut” och ett du kan försvara, och det är precis det en bedömare letar efter.

Nästa nivå

Godkänt är noll röda Errors i WAVE. Sikta högre. Fixa även alla gula Alerts (WAVE flaggar dem för en anledning), stäng av musen och tabba igenom hela sidan för att kontrollera att fokusringen alltid syns och att inget är oåtkomligt, och testa om du når AAA-kontrast (7:1) på din brödtext i stället för AA (4,5:1). Ett CV som klarar ett riktigt tangentbordstest och 0 alerts är inte “snyggt”, det är proffskvalitet, och det är den nivån som gör dig anställningsbar.

Inga frågor tillgängliga för detta tema ännu.