7.1 KiB

Raw Blame History

Opgave: Giv din browserudvidelse et nyt design

Oversigt

Nu hvor du har opbygget HTML-strukturen for din browserudvidelse til beregning af CO2-aftryk, er det tid til at gøre den visuelt tiltalende og brugervenlig. Et godt design forbedrer brugeroplevelsen og gør din udvidelse mere professionel og engagerende.

Din udvidelse har grundlæggende CSS-styling, men denne opgave udfordrer dig til at skabe en unik visuel identitet, der afspejler din personlige stil, samtidig med at du opretholder fremragende brugervenlighed.

Instruktioner

Del 1: Analyser det nuværende design

Før du foretager ændringer, skal du undersøge den eksisterende CSS-struktur:

Find CSS-filerne i dit udvidelsesprojekt
Gennemgå den nuværende stylingtilgang og farveskema
Identificer områder, der kan forbedres i layout, typografi og visuel hierarki
Overvej, hvordan designet understøtter brugerens mål (nem formularudfyldelse og tydelig data-visning)

Del 2: Design din egen styling

Skab et sammenhængende visuelt design, der inkluderer:

Farveskema:

Vælg en primær farvepalet, der afspejler miljøtemaer
Sørg for tilstrækkelig kontrast for tilgængelighed (brug værktøjer som WebAIM's kontrastkontrol)
Overvej, hvordan farverne ser ud på tværs af forskellige browsertemaer

Typografi:

Vælg læsbare skrifttyper, der fungerer godt i små udvidelsesstørrelser
Etabler et klart hierarki med passende skriftstørrelser og vægte
Sørg for, at teksten forbliver læsbar i både lyse og mørke browsertemaer

Layout og afstand:

Forbedr den visuelle organisering af formularfelter og datavisning
Tilføj passende polstring og marginer for bedre læsbarhed
Overvej principper for responsivt design til forskellige skærmstørrelser

Del 3: Implementer dit design

Rediger CSS-filerne for at implementere dit design:

/* Example starting points for customization */

.form-data {
    /* Style the configuration form */
    background: /* your choice */;
    padding: /* your spacing */;
    border-radius: /* your preference */;
}

.result-container {
    /* Style the data display area */
    background: /* complementary color */;
    border: /* your border style */;
    margin: /* your spacing */;
}

/* Add your custom styles here */

Vigtige områder at style:

Formularelementer: Indtastningsfelter, etiketter og send-knap
Resultatvisning: Databeholder, tekststyling og indlæsningsstatus
Interaktive elementer: Hover-effekter, knaptilstande og overgange
Overordnet layout: Beholderafstand, baggrundsfarver og visuel hierarki

Del 4: Test og finjuster

Byg din udvidelse med npm run build
Indlæs den opdaterede udvidelse i din browser
Test alle visuelle tilstande (formularudfyldelse, indlæsning, resultatvisning, fejl)
Bekræft tilgængelighed med browserens udviklerværktøjer
Finjuster dine styles baseret på faktisk brug

Kreative udfordringer

Grundlæggende niveau

Opdater farver og skrifttyper for at skabe et sammenhængende tema
Forbedr afstand og justering i hele grænsefladen
Tilføj subtile hover-effekter til interaktive elementer

Mellemniveau

Design brugerdefinerede ikoner eller grafik til din udvidelse
Implementer glidende overgange mellem forskellige tilstande
Skab en unik indlæsningsanimation til API-kald

Avanceret niveau

Design flere temaindstillinger (lys/mørk/høj kontrast)
Implementer responsivt design til forskellige browservinduesstørrelser
Tilføj mikrointeraktioner, der forbedrer brugeroplevelsen

Retningslinjer for aflevering

Din færdige opgave skal inkludere:

Redigerede CSS-filer med din egen styling
Skærmbilleder, der viser din udvidelse i forskellige tilstande (formular, indlæsning, resultater)
Kort beskrivelse (2-3 sætninger), der forklarer dine designvalg og hvordan de forbedrer brugeroplevelsen

Vurderingsrubrik

Kriterier	Fremragende (4)	God (3)	Under udvikling (2)	Begynder (1)
Visuelt design	Kreativt, sammenhængende design, der forbedrer brugervenlighed og afspejler stærke designprincipper	Gode designvalg med konsekvent styling og klart visuelt hierarki	Grundlæggende designforbedringer med nogle konsistensproblemer	Minimale stylingændringer eller inkonsekvent design
Funktionalitet	Alle styles fungerer perfekt på tværs af forskellige tilstande og browsermiljøer	Styles fungerer godt med mindre problemer i kanttilfælde	De fleste styles er funktionelle med nogle visningsproblemer	Betydelige stylingproblemer, der påvirker brugervenligheden
Kodekvalitet	Ren, velorganiseret CSS med meningsfulde klassenavne og effektive selektorer	God CSS-struktur med passende brug af selektorer og egenskaber	Acceptabel CSS med nogle organisatoriske problemer	Dårlig CSS-struktur eller overdrevent kompleks styling
Tilgængelighed	Fremragende farvekontrast, læsbare skrifttyper og hensyn til brugere med handicap	Gode tilgængelighedspraksisser med mindre forbedringsområder	Grundlæggende tilgængelighedsovervejelser med nogle problemer	Begrænset opmærksomhed på tilgængelighedskrav

Tips til succes

💡 Designtip: Start med subtile ændringer og byg op til mere dramatiske stylinger. Små forbedringer i typografi og afstand har ofte stor indflydelse på den opfattede kvalitet.

Bedste praksis at følge:

Test din udvidelse i både lyse og mørke browsertemaer
Brug relative enheder (em, rem) for bedre skalerbarhed
Oprethold konsekvent afstand ved hjælp af CSS-variabler
Overvej, hvordan dit design vil se ud for brugere med forskellige visuelle behov
Valider din CSS for at sikre, at den følger korrekt syntaks

⚠️ Almindelig fejl: Ofre ikke brugervenlighed for visuel appel. Din udvidelse skal være både smuk og funktionel.

Husk at:

Bevare vigtig information let læselig
Sikre, at knapper og interaktive elementer er nemme at klikke på
Opretholde klar visuel feedback for brugerhandlinger
Teste dit design med rigtige data, ikke kun pladsholdertekst

Held og lykke med at skabe en browserudvidelse, der både er funktionel og visuelt imponerende!

Ansvarsfraskrivelse:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.

7.1 KiB Raw Blame History