Structure plane
2. Ontwerprapport engelrepro.nl 1 De doelgroep
2.4.2 Het grafische ontwerp
Hieronder ziet je een afbeelding van de home pagina. Het is een sfeer impressie van wat te verwachten is. Wat als eerste opvalt is het grote sfeerbeeld met daar naast de speels geplaatste informatieve menu knoppen die de bezoeker van de website begeleiden naar het printshop gedeelte van de website en de online kantoorshop.
Er zullen iconen en afbeeldingen te zien zijn die aansluiten op de huisstijl van Engel Repro & Druk. Door middel van een speelse indeling afgewisseld met rechte lijnen krijgt de website een zakelijke maar toch ook speelse uitstraling. Het kleuren pallet van de printshop is afkomstig van de huisstijl. Even als het sfeer beeld dat je rechts boven kunt ziet. De kleuren blauw en wit stralen rust en professionaliteit uit. Turkoois is een kleur die opvalt, maar niet op een overdreven manier. Het houdt de aandacht vast en is daarom bijzonder geschikt om gebruikers hun aandacht naar een bepaald punt te trekken. De ronde vormen en hoeken geven de website een vriendelijk karakter. Dit zorgt er voor een persoonlijke benadering. De vormen zijn speels over elkaar geplaatst waardoor het meer een geheel vormt. Tevens zal de website op andere pagina’s een scrollende content bevatten, wanneer men verder in het menu van een printopdracht
terecht komt. Hierna worden de onderdelen los van elkaar besproken. Om duidelijk aan te geven over welk onderdeel het gaat is alles er omheen minder zichtbaar gemaakt. a. De header
De header is opgebouwd uit het logo van Engel Repro & Druk met daarnaar een menubalk. In deze menubalk staat de basis knoppen van de printshop.
De knop “Home” zorgt er voor dat een gebruiker altijd terug kan keren naar het begin. Onder de knop “Producten” vind met een overzicht van alle producten die via de
printshop worden aangeboden. Deze staan ook al op de “home” pagina maar daar vertel ik straks meer over. De knop “Aanbiedingen” geeft de gebruiker een overzicht van de huidige aanbiedingen. Na inloggen kan dit eventueel ook gepersonaliseerd worden. Specifieke aanbiedingen geselecteerd voor een bepaalde gebruiker. Onder de knop “Engel” vind met informatie over het bedrijf Engel Repro & Druk. Daarnaast is een aparte knop die verwijst naar de “contact”-gegevens. Als laatste een knop waarmeer de
gebruiker zich kan aanmelden op de website “uw account | aanmelden”. b. Content vlakken
De tekstvlakken op deze website van de printshop zijn beperkt gehouden en puur informatief. Over het algemeen staat er alleen informatie over het product en/of dienst. Meer tekst en uitleg is de gebruiker niet naar opzoek. Ze willen hun document printen en geen lange teksten er voor lezen.
c. Het menu
In het menu links van de pagina vindt de gebruiker het informatie over de mogelijkheden die Engel Repro en Druk voor hun te bieden heeft. Al deze menu items linken naar pagina’s die puur informatief zijn voor de bezoeker van de website (zie hier rechts naast een afbeelding van dit menu). Naast dit informatieve menu bevind zich in het midden van de pagina een speels opgesteld menu die de bezoeker leidt naar het printshop gedeelte. Het particuliere gedeelte van de website is hierbij gescheiden van het zakelijke gedeelte omdat deze 2 doelgroepen
duidelijk andere behoeften qua print mogelijkheden zoeken. Daarnaast is er een link te vinden naar een aparte website. Dit is de online
kantoorspullen winkel van Engel Repro & Druk. Zie hieronder afgebeeld. Deze zijn expres zo groot en opvallend in het midden
geplaatst, om de bezoeker duidelijk en snel te kunnen begeleiden naar het printshop gedeelte van de website.
16 d. ontwerp vervolgpagina
Als de gebruiker op een van de menu items klikt veranderd het onderste gedeelte van de pagina in 1 groot content blok waar de informatie van de desbetreffende link in
tevoorschijn komt. Hiervoor wordt de lay-out van de pagina dus iets aangepast. Een voorbeeld van deze vervolg pagina is hier onder afgebeeld.
Naast een informatieve vervolgpagina bevat de website nog een 3e en 4e vervolgpagina.
Deze zijn afkomstig uit het printshop gedeelte van de website. Doordat er op deze pagina’s gewerkt wordt met variabele formulieren die afhankelijk zijn van de print opdracht, hebben deze een eigen vormgeving. Zie de volgende twee afbeeldingen op de volgende pagina
Voorpagina printshop:
18
e. Het stramien
Onder elk scherm zit een bepaald stramien, en veld met lijnen welke aangeven waar de verschillende vakken zijn uitgelijnd. Dit is handig voor de opbouw van een website, maar ook voor het plaatsen van afbeeldingen zodat ze uitlijnen met de tekst. Door het uitlijnen van de verschillende elementen aan de hand van de stramien lijnen, kan de website meer rust uitstralen en de mensen daarmee aansporen verder te kijken/lezen.
Hierboven is het stramien van de website Engel Repro & Druk te zien. Aan dit stramien is gelijk te zien welke delen met elkaar zijn uitgelijnd. Hieronder volgt nog een stramien van het printshop gedeelte van de website:
Beide stamijnen zijn voorzien van een logo in de linker boven hoek, en menu elementen aan de linker kant van de pagina. Deze staat op de zelfde posities zodat het
2.4.3 Lettertypen
De basis voor elke vorm van lay-out, daarnaast is het zeer belangrijk om pakkende en vooral ook passende lettertypes te gebruiken. Omdat de huisstijl van Engel Repro & Druk al is vast gelegd, heb ik er voor gekozen om de zelfde lettertypes door te voeren op de website. Zo wordt het bedrijf herkenbaar en straalt het eenheid uit. Om een beeld te geven van welke deel van de teksten welke grootte, kleuren en lettertypes bevatten volgt hier onder een overzicht.
20 2.4.4 Algemeen kleur gebruik
Voor het kleurgebruik heb ik gekeken naar de huisstijl van Engel Repro & Druk. Om er voor te zorgen dat de nieuwe website goed op de huisstijl aansluiten heb ik de huisstijl kleuren zo veel mogelijk toegepast. Hieronder een overzicht van de huisstijl kleuren: