Page 1

Design document In opdracht van PS voor slagers Door Kay van den Heuvel Versie 01 11-12-13


2

Kay van den Heuvel - Design document - PS voor slagers


Kay van den Heuvel - Design document - PS voor slagers

3


4

Kay van den Heuvel - Design document - PS voor slagers


Inhoudsopgave Inleiding 7 1. Concept 8

1.1 Het basis idee 1.2 Inhoud 1.3 Uiterlijk 1.4 Structuur

2. Analyse 9 2.1 Doelstelling 2.2 Doelgroep 2.3 Positionering en merkwaarden

3. Ontwerp keuzes 10 3.1 Fonts 3.2 Kleuren

4. Scherm ontwerpen 12 4.1 Overloop 4.2 Home 4.3 Nieuws 4.4 Registreren 4.5 Applicatie - merken selecteren 4.6 Applicatie - ingrediĂŤnten selecteren 4.7 Applicatie - handmatig toevoegen 4.8 Applicatie - product specificaties 4.9 Applicatie - ingrediĂŤnten toevoegen 4.10 Applicatie - bereiding toevoegen

5. Label ontwerp 23 Conclusie 25

Kay van den Heuvel - Design document - PS voor slagers

5


6

Kay van den Heuvel - Design document - PS voor slagers


Inleiding In dit document wordt het ontwerp van de website PS voor slagers getoont. Het doel van dit document is dat de realisatie van de website gedaan kan worden volgens ontwerp. Vooraf wordt onder andere kort verteld wat het concept is, wie de doelgroep is en wat de doelstellingen zijn. Aan de hand hiervan zijn bepaalde ontwerp keuzes gemaakt. Deze worden nog even toegelicht zodat dit document ook al handleiding kan dienen tijdens het realiseren van de website. Aan de hand van deze eerste hoofdstukkken wordt het ontwerp toegelicht. Van iedere pagina is een definitief ontwerp te zien, volledig uitgewerkt. Van zowel de website als de applicatie worden de schermen beschreven. Voor de werking tussen gebruiker en systeem kan worden gekeken in het document structure_490138_versie02.docx.

Kay van den Heuvel - Design document - PS voor slagers

7


1. Concept 1.1 Het basis idee

PS in foodservice is een nieuw project gestart in opdracht van de Koninklijke Slagersorganistaie. Het project genaamd PS voor slagers moet ervoor zorgen dat slagers in Nederland een plaats krijgen waar zij kunnen voldoen aan de wetgeving die eind 2014 van kracht gaat. PS in foodservice gaat een webapplicatie maken waarin de slagers zelf hun eigen producten digitaal kunnen samenstellen vanuit de database. De slagers kunnen dan hun producten bekijken en daarvan een etiket printen die voldoet aan de wetgeving.

De webapplicatie krijgt een uniek verticaal menu aan de linkerkant van het scherm. Op deze manier kan de gebruiker nog goed zien waar hij/ zij zich bevind op de website, maar ook binnen de webapplicatie. In de webapplicatie is gebruik gemaakt van een simpel ontwerp. De gebruiker moet niet worden afgeleid door zaken die op de achtergrond horen te vallen. Door gebruik te maken van de verschillende staten van een knop kan de gebruiker zien waar op geklikt kan worden of niet. Dit wordt gedaan door verschillen te verwerken door middel van kleur.

1.2 Inhoud

1.4 Structuur

Uit onderzoek is gebleken dat de volgende onderdelen terug moeten komen op de website: 1. Home; 2. Nieuws; 3. Registratie; 4. Contact; 5. Webapplicatie; 6. KNS receptenmap.

Hieronder een korte beschrijving van de stappen die de gebruiker moet doorlopen. 1. Merken selecteren vanuit de database. 2. IngrediĂŤnten selecteren vanuit de gekozen merken of handmatig een ingrediĂŤnt toevoegen. 3. Product samenstellen bestaand uit drie segmenten Als de gebruiker deze stappen heeft doorlopen dan heeft hij/zij een compleet product waarvan een etiket bekeken kan worden.

Om de inhoud van de website en webapplicatie te kunnen bepalen is er gekeken naar de doelgroep. Wat wil de gebruiker? Wat moet de gebruiker kunnen doen? En waaraan moet de webapplicatie voldoen zodat de eisen van de wetgeving voldaan worden?

De structuur van de webapplicatie wordt zo simpel en strak mogelijk. De gebruiker zal van links naar rechts moeten werken en hij/zij zal door een proces geleid worden.

1.3 Uiterlijk

Het uiterlijk van zowel de website als de webapplicatie zullen simpel en strak moeten zijn. Er wordt veel gebruik gemaakt van zwart/wit tintent en om onderdelen eruit te laten springen wordt gebruikt gemaakt van de kleuren rood en groen. Kleuren worden gebruikt om aan te geven waar de gebruiker zich bevind en waar de aandacht op ligt.

8

Kay van den Heuvel - Design document - PS voor slagers


2. Analyse 2.1 Doelstelling

PS in foodservice wilt uitbreiden door nieuwe markten aan te breken. Dit willen zij doen door de webapplicatie PS voor slagers te maken die ervoor moet zorgen dat slagers in Nederland gemakkelijk etiketten kunnen maken van hun producten. Deze etiketten moeten er dan voor zorgen dat de slagers voldoen aan de nieuwe wetgeving, verordening 1169/2011 etiketteringwetgeving.

2.2 Doelgroep

De doelgroep bestaat uit twee segmenten, namelijk de algemene gebruikers en slagers. De algemene gebruikers zijn mensen die op de website terecht komen voor informatie over PS voor slagers, maar zelf geen slager zijn. Deze gebruikers zullen geen toegang krijgen tot de webapplicatie waarvoor ingelogd moet worden.

2.3 Positionering en merkwaarden

De belangrijkste merkwaarden die terugkomen binnen de website en webapplicatie zijn: 1. Oplossingsgericht; 2. Overzichtelijk; 3. Gemakkelijk; 4. Tijdbesparend. Deze merkwaarden komen voornamelijk terug door de vormgeving en de werking. Kleur, structuur en werking vormen samen de juiste opbouw. De webapplicatie onderscheid zich van anderen door middel van: 1. Maakt gebruik van een online database met meer dan 40.000 producten; 2. In opdracht van de Koninklijke Nederlandse Slagersorganisatie (KNS); 3. Relatief laag in prijs; 4. Specifiek gericht op de wetgeving “verordening nr. 1169/2011.

De slagers zullen voornamelijk naar de website komen voor de webapplicatie. Om daar te komen zullen zij eerst moeten inloggen. De slager kan op twee manieren aan een inlogcode komen. Dit kan zijn door de KNS of door zelf te registreren op de website.

Kay van den Heuvel - Design document - PS voor slagers

9


3. Ontwerp keuzes 3.1 Fonts

Uit onderzoek is gebleken dat de gebruikers houden van een simpel en strak ontwerp. Hier past dan ook een strakke font bij. In mijn ogen moet een strakke font aan een aantal zaken voldoen, namelijk: stroke dikte met minimale verschillen & sans serif. Daarnaast moet de font ook beschikbaar zijn op het web. Naar verschillende fonts te hebben overwogen is gekozen voor Arial.

Arial Regular Arial Bold Arial Italic Hierboven is te zien dat er duidelijke verschillen zijn tussen de verschillende soorten opmaak van deze font. Het gebruik van deze verschillen kan ergens gemakkelijk de nadruk op geven. Voor koppen zal er een grotere lettergrote gebruikt worden en zal tevens de kleur rood worden toegevoed.

3.2 Kleuren

Om de website wat aantrekkelijker te maken en ervoor te zorgen dat bepaalde onderdelen de aandacht krijgen die ze nodig hebben, gaat er gewerkt worden met kleuren. De meest gebruikte kleuren zullen voortkomen vanuit het logo (zwart/wit tinten en rood). Bij de afbeeldingen zijn twee verschillende notaties gezet. Op deze manier zou ten alle tijde deze specifieke kleur moeten kunnen worden gekozen en is dus niet programma afhankeliijk.

Hierboven zijn de grijstinten te zien die gebruikt gaan worden. De grijstinten zullen voornamelijk terugkomen als aanduiding van vlakken en randen. Deze tinten grijs zijn gekozen omdat deze ook in het logo verwerkt zijn en op deze manier ĂŠĂŠn lijn wordt gehouden.

10

Kay van den Heuvel - Design document - PS voor slagers


In de onderstaande afbeelding zijn de rood-tinten te zien. Van de vijf tinten is de middelste de tint die uit het logo komt. Alle tinten zijn monochroom aan elkaar, wat inhoud dat ze dus allemaal afgeleid zijn van het origineel. Deze kleuren zullen gebruikt worden voor bijvoorbeeld knoppen en selectie opties.

Naast deze kleur komt er ook nog een kleur dat een hoog contrast geeft met de rode tinten. Deze kleuren zijn complementair aan elkaar. Er moet wel subtiel mee om worden gegaan anders wordt het een bijna een kerstafbeelding. Deze groene tinten zullen gebruikt worden bij knoppen die de voortgang bijhouden. Denk bijvoorbeeld aan een knop “Volgende�.

Kay van den Heuvel - Design document - PS voor slagers

11


4. Scherm ontwerpen 4.1 Overloop

Omdat de gebruikers natuurlijk niet allemaal dezelfde schermen hebben, zal er rekening moeten worden gehouden met een overloop. Dit houd in dat de website zelf gecentreerd wordt van het scherm en dat dan aan de zijkanten een overloop komt. Voor deze overloop gaat er een afbeelding gebruikt worden van verschillende vleessoorten. Deze afbeelding is gekozen omdat deze ook wordt gebruikt bij promotie materiaal van

12

PS voor slagers, zoals bijvoorbeeld flyers. Deze afbeelding zal opgeknipt worden zodat deze aan beide kanten van de daadwerkelijke webpagina goed uitgelijnd is. Door deze afbeelding te gebruiken voor de overloop zal er eenheid ontstaan in de producten die PS voor slagers levert aan de gebruikers.

Kay van den Heuvel - Design document - PS voor slagers


4.2 Home

De home pagina is de landingspagina van de website. Gebruikers zullen hier altijd terecht komen wanneer er gezocht wordt naar PS voor slagers. De home pagina zal basis informatie bevatten over PS voor slagers. De website is

opgebouwd met een grid dat bestaat uit 12 kolommen. Hierdoor is er een goede verdeling te maken die zorgt voor overzicht en structuur voor zowel de website als de webapplicatie.

Er wordt gebruik gemaakt van een horizontaal menu met speciaal ontworpen menu afbeeldingen. De vorm van de menu items is afgeleid van de oormerken van een koe. De kleur van het menu item geeft aan waar de gebruiker zich bevind op de website, dit bevordert de gebruiksvriendelijkheid.

Kay van den Heuvel - Design document - PS voor slagers

13


4.3 Nieuws

Op deze pagina zullen alle nieuws items komen. De pagina zal meerdere nieuws items bevatten (zonder limiet). In eerste instantie ziet de gebruiker alleen een klein deel van de tekst. Wanneer de gebruiker op “Lees meer� klikt zal het gehele bericht getoond worden. De nieuws items pagina

14

heeft geen maximum lengte, hierdoor zal er een scrollbar aan de zijkant van de pagina onstaan wanneer deze de minimum lengte overschrijd.

Kay van den Heuvel - Design document - PS voor slagers


4.4 Registreren

Op deze pagina kunnen gebruikers zich aanmelden voor de webapplicatie. Alle gegevens moeten ingevuld worden. Er wordt hier gebruikt gemaakt van formulieren die de juiste data doorsturen naar PS voor slagers zodat ook zij de gebruiksgegevens hebben. Naast alleen het aan-

melden kan de gebruiker hier ook zijn wachtwoord weer opvragen. Dit is nodig voor als de gebruiker zijn of haar wachtwoord is verloren.

Kay van den Heuvel - Design document - PS voor slagers

15


4.5 Applicatie - Merken selecteren

Wanneer de gebruiker is ingelogd en doorgaat naar de applicatie zal dit het eerste scherm zijn dat hij/zij ziet. Links in het scherm is een submenu gekomen, deze geld alleen voor de appllicatie. In het midden is de merken database waaruit merken geselecteerd moeten worden.

16

De gebruiker selecteerd de merken door op een icoon te klikken waardoor het merk verplaatst van de database naar het Mijn merken vak rechts op het scherm. De gebruiker kan een voorselectie maken door te filteren op de eerste letter van het merk.

Kay van den Heuvel - Design document - PS voor slagers


4.6 Applicatie - Ingrediënten selecteren

Het ingrediënten selecteren gaat het zelfde als het selecteren van merken. Alleen is er hier een verschil, namelijk dat de gebruiker handmatig een ingrediënt kan toevoegen. De knop hiervoor is te vinden in het onderdeel Mijn ingrediënten.

Kay van den Heuvel - Design document - PS voor slagers

17


4.7 Applicatie - Handmatig toevoegen

In dit scherm moet de gebruiker zelf alle specificaties van een ingrediĂŤnt invullen. Dit is van belang wanneer een ingrediĂŤnt dat wel gebruikt wordt, maar niet in de database staat van PS voor slagers. In dit scherm zijn alle belangrijke specificaties getoont die nodig zijn om door te

18

voeren in de eindberekening van een totaal product. Denk bijvoorbeeld aan benaming, allergenen, voedingswaarde en dergelijke.

Kay van den Heuvel - Design document - PS voor slagers


Dit is het vervolg van het handmatig toevoegen van een ingrediĂŤnt. Doordat de gebruikers naar beneden scrollen komen ze op dit scherm terecht. Hier kunnen ze extra allergenen aanvinken en de gebruiker kan de voedingswaarden overnemen. Tevens kan er ook worden aangegeven of het per gr. of ml. is.

Kay van den Heuvel - Design document - PS voor slagers

19


4.8 Applicatie - Product specificaties

Dit is het eerste onderdeel van het aanmaken van een nieuw product. Hier moet de algemene informatie van dat product worden aangegeven. Het zijn allemaal textvakken die handmatig ingevuld moeten worden door de gebruiker.

20

Kay van den Heuvel - Design document - PS voor slagers


4.9 Applicatie - Ingrediënt toevoegen

Nadat de gebruiker de specificaties heeft toegevoegd aan een product zal hij ingrediënten toe moeten voegen. De gebruiker moet gebruik maken van het dropdown + autocomplete zoekbalk. Hierin kan hij een deel van het ingrediënt typen en dan komen al zijn van te voren geselec-

teerde ingrediënen naar voren. Deze kan hij aanklikken waardoor deze verschijnt in het tabel. Dit tabel schaalt automatisch mee in hoeveelheid als er meerdere worden toegevoegd. Als de gebruiker de KWID wilt zien dan moet dat hier aangevinkt worden.

Kay van den Heuvel - Design document - PS voor slagers

21


4.10 Applicatie - bereiding toevoegen

Dit is de laatste stap van het maken van een product. De fase is een keuze menu waaraan een berekening is gehangen. Deze berekening is nodig om de totale voedingswaarde te berekenen. De andere velden kunnen ingevuld worden naar de voorkeur van de gebruiker.

22

Kay van den Heuvel - Design document - PS voor slagers


5. Label ontwerp De labels zijn een onderdeel van de applicatie PS voor slagers. Met de labels worden te individuele merken/ingrediĂŤnten/producten bedoeld (hiervoor getoond als witte vlakken). In dit hoofdstuk wordt toegelicht hoe de labels in elkaar zitten en wat de verschillen zijn.

In de labels zijn twee witte vakken te zien, de bovenste wordt gevuld met het logo van het desbetreffende merk en het onderste vak wordt gevuld met tekst, oftewel de naam van het merk/ingrediĂŤnt/ product. Aan de zijkant zijn vier iconen te zien, allemaal hebben ze hun eigen werking, namelijk; toevoegen, bewerken, kopiĂŤren en verwijderen. Deze iconen zijn nooit altijd allemaal te zien, zo kan er vanuit de database niet worden verwijderd maar wel worden toegevoegd. En zo kan er vanaf het persoonlijke magazijn wel worden verwijderd maar niet worden toegevoegd om maar even een klein voorbeeld te geven. Het eerste label is de normale staat van het label. De tweede label is de hover van het label, er komt en kleine subtiele schaduw aan de onderkant en rechterkant van het label. Wanneer het label geselecteerd wordt dan wordt afbeelding drie getoond. Deze kleur wordt vaker gebruikt in de website en applicatie om aan te geven waar een gebruiker op dat moment is.

Kay van den Heuvel - Design document - PS voor slagers

23


24

Kay van den Heuvel - Design document - PS voor slagers


Conclusie Tijdens de realisatie van de website www.psvoorslagers.nl kan dit document als richtlijn aangehouden worden voor het ontwerp. Tevens kan dit document gebruikt worden voor het gebruik van kleur en font op de website en andere documentatie (denk aan promotie materiaal of nieuwe documenten). Hieronder nogmaals een aantal aandachtspunten op een rijtje: - Grid van 960px breed (column 70px, gutter 10px); - Basiskleuren zijn #9e0b0f (rood) & #bacc9a (groen); - Achtergrond kleuren zijn #353534, #706f6f & #b3b2b2 (grijstinten); - Font color is wit; - Font size is 12pt; - Font is Arial; - Actieve pagina aangeduid in menu.

Kay van den Heuvel - Design document - PS voor slagers

25


26

Kay van den Heuvel - Design document - PS voor slagers


Kay van den Heuvel - Design document - PS voor slagers

27


Design document  
Advertisement