# Styletile

### Waarom een styletile?

Door een styletile te maken heb ik een overzicht over het design van de zelfscan kassa. Ik laat zien welke buttons, kleuren, lettertype en elementen ik gebruik.&#x20;

Ik heb het lettertype Helvetica Neue gebruikt, omdat ik het officiële lettertype van H\&M niet heb. Helvetica Neue komt wel het dichtste bij het lettertype van H\&M.&#x20;

### Styletile

<div align="left"><img src="https://2699312490-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYzr9PNNNYycIVnPtbx%2F-Lg2Qlf4cyCU1WpJjjKF%2F-Lg2U6OqPQ4d5_AxtGvf%2FStyletile.jpg?alt=media&#x26;token=8caac971-0fa3-4dc7-979f-a418cec69abc" alt=""></div>

{% file src="https://2699312490-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYzr9PNNNYycIVnPtbx%2F-Lg2_Ko6I337bFvQbW-U%2F-Lg2_S-MM1eSnu3WPMob%2FStyletile.pdf?alt=media&token=d70689c7-25c1-474f-82dd-e4eebb8cebe4" %}
Styletile zelfscan kassa
{% endfile %}

{% tabs %}
{% tab title="Buttons" %}
De buttons lijken op de buttons van de H\&M website.

**Zwart met witte tekst:** Dat is de knop waar het liefst op wordt geklikt. Het valt door de zwarte achtergrond ook meer op.

**Witte button met zwarte lijn en tekst:** Is de knop waar je ook op kan klikken als het niet lukt of als je meer informatie nodig hebt.&#x20;
{% endtab %}

{% tab title="Kleuren" %}
Dit zijn de kleuren van H\&M. Ik heb het ontwerp hier aan gehouden. Soms had ik een lichtere kleur nodig en paste ik de opacity aan.
{% endtab %}

{% tab title="Progres bar" %}
De progres bar heeft verschillende states.\
Wanneer het icoon:

**Rood** is: betekent dit dat de consument in dat proces is. \
**Grijs** is: betekent dit dat de consument nog niet bij het proces is gekomen. Er kan ook niet op geklikt worden\
**Zwart** is: betekent dit dat de consument klaar is met het proces. Er kan wel geklikt worden op dit icoon om de keuzes opnieuw te bekijken.&#x20;
{% endtab %}

{% tab title="Bon" %}
Het ontwerp van de bon veranderd niet veel. Wanneer de H\&M club member wordt gescand wordt de onderkant zwart met de code. Als er geen H\&M club member wordt gescand dan wordt de onderkant ook zwart maar staat er geen H\&M club member.&#x20;

Wat verder veranderd zijn de bedragen en aantal producten.&#x20;
{% endtab %}

{% tab title="Video" %}
Alle video's hebben een schaduw als achtergrond en zijn even groot.&#x20;
{% endtab %}

{% tab title="Animatie" %}
De animatie gaat over het scannen van de producten of het alarm verwijderen van de producten. Het laat zien hoe lang de animatie bezig is.
{% endtab %}

{% tab title="Product tegel" %}
Alle product tegels hebben dezelfde elementen:

* Afbeelding van het product
* Product naam
* Het bedrag
* Artikel nummer
* Kleur
* Maat

**Korting**\
Als het product korting heeft komt het bedrag in het rood te staan en het oude bedrag met een streep doorheen. &#x20;

**Product of voucher toegevoegd**\
Wanneer een nieuw product wordt toegevoegd of een voucher krijgt het een rode lijn. Zo valt het op tussen de andere producten. Voor kleurenblinden zien zij het verschil door de lijn dat er donker uit ziet.&#x20;
{% endtab %}

{% tab title="Pop up" %}
De pop ups zien er bijna allemaal zo uit. Ze hebben een titel, informatie tekst en een knop. Pop ups komen wanneer de consument meer informatie nodig heeft. De pop ups komen ook wanneer er iets mis gaat.
{% endtab %}

{% tab title="Afbeeldingen" %}
Er zitten niet zo veel afbeeldingen in de zelfscan kassa. Ze zijn er bedoeld als ondersteuning om te begrijpen wat er wordt gevraagd op het moment.
{% endtab %}
{% endtabs %}
