Overzichtspagina

[koeenm]

What this ticket includes

• Research, what the best way is to built this component.
• Gather links and information that could be useful for while building the component (Research)
• Build the component
• Component must be fully responsive
• Test the responsiveness

Research

how did you come to this code or aesthetical decision

Ik wil een pagina maken waarop je een overzicht hebt van de packages/mobility options en de algemene informatie. Voor de informatie op deze pagina maak ik gebruik van issue #25

Ik heb dus 2 verschillende onderdelen op die pagina. Ik maak van deze verschillende componenten aparte bestanden aan in mijn project zodat ik de componenten handig kan herbruiken en aparte styling op deze kan toepassen.:

<script>
    export let data;
    import '../../styles/overview.css'
    import MobilityOptions from '$lib/mobility-options.svelte';
</script>

<main>
    <header>
            <h1>Overzicht</h1>
        <span>
            <a href="/wizard">Wizard</a>
            <a href="/inlog">Log in</a>
        </span>
    </header>

    <MobilityOptions/>
</main>

Hier is te zien hoe ik de mobility options vanuit een aparate file heb toegevoegd aan mijn main file.

De pagina is voor desktop only, dus ik zal niet mobile first gaan werken.

Schetsen

Ik heb 4 mobility options, een beetje algemene informatie en job grades met mobility options.

Breakdown schets

Design critique

...

Pagina voor nu (29/09)

conventions #4

Zoveel mogelijk werken in components (DRY)

• [x] Aparte CSS files als dit veel is
• [ ] Mobile First
• [ ] Comments toevoegen aan complexe code zodat dit voor iedereen in de squad te begrijpen is
• [x] Kebab case
• [ ] epic

Links

Userstory

Als gebruiker wil ik een duidelijk overzicht van de verschillende packages/mobility options en de algemene informatie

Reference

Media of how it can and maybe should look.

Test

How to execute the tests

• [ ] lighthouse
• [ ] tab
• [ ] user
• [ ] color contrast
• [ ] performance
• [ ] HTML validator

Test results

Test results pagina van (29/09).

Tab test is te vinden in issue #30 .

Lighthouse

How can we solve this

[SamaraFellaDina]

@koeenm

4. Good design makes a product understandable

• Bij de landingspagina is mij niet meteen duidelijk is wat de functie is van de webiste. Misschien helpt het door de typogarfie duidelijk aan te geven.

  • Er staat wel duidelijk een titel bij, dus misschien mis ik gewoon wat context. Je kan overwegen om een duidelijke formulatie te geven

• De header komt in eerste opzichte een beetje onduidelijk over

  • Echter kan je hier de titel vinden van de pagina.

8. Good design is thorough down to the last detail

• Je mist nog bepaalde stijlen die de huisstijl beter zouden kunnen definieren

  10. Good design is as little design as possible

• Dat kan koen heel goed wow er moeten nog dingen weg.