Werkdocument Arjen Toonstra
@
2
Inhoudsopgave
Herformulering:........................................................ 4 De Stappen :............................................................... 4 Plan van aanpak........................................................ 4 Benodigde middelen:................................................ 5 Stagebegeleider........................................................ 5 Benodigde middelen Eindpresentatie:................... 5 Plan van aanpak........................................................ 5 Afspraken.................................................................. 7 Volgende stap............................................................ 7 Logboek...................................................................... 8 Mindmap en schetsjes.............................................. 16 Onderbouwing.......................................................... 16 Schetsen stijl 2.......................................................... 17 Onderbouwing.......................................................... 17 Pinterest onderzoek................................................. 18 Concurrenten onderzoek......................................... 19 Doelgroep onderzoek............................................... 20 RBT-huisstijl onderzoek........................................... 21 RBT-huisstijl onderzoek........................................... 22 Onderbouwing.......................................................... 22 Pinterest onderzoek................................................. 23 Bouwspullen.............................................................. 24 Logo afleiDing stijl 1................................................. 25 Logo afleiDing stijl 2................................................. 26 Stijlkaart 1: Onderdeel van RBT.............................. 27
Inhoudsopgave
Voorbeelden elementen.......................................... 27 Stijlkaart 2: Op ons kun je bouwen......................... 28 Voorbeelden elementen.......................................... 28 Herformulering:........................................................ 29 De Stappen :............................................................... 29 Plan van aanpak........................................................ 29 Voorbeelden elementen.......................................... 34 Gekozen stijl.............................................................. 34 Wat erbij is gekomen uit stijl 2................................ 35 Logo ontwerp............................................................ 36 Logo ontwerp............................................................ 37 Website Homepagina onderzoek............................ 38 Website Homepagina............................................... 39 Website Homepagina............................................... 40 Onderbouwing.......................................................... 40 Website Lettertype................................................... 41 Website Homepagina............................................... 43 Logo ontwerp............................................................ 44 Website Categorie pagina onderzoek..................... 45 Website Categorie pagina........................................ 46 Onderbouwing.......................................................... 46 Homepagina onderbouwing.................................... 47 Homepagina.............................................................. 48 Categorie pagina onderbouwing............................. 49 Categorie pagina....................................................... 50
Plan van aanpak
4
Herformulering: De opdracht bestaat uit 3 media-uitingen. Deze maak ik aan de hand van de procedure die ik geleerd hebt bij de bloktoetsen. Er is gekozen voor de volgende media-uitingen: • Een logo • Homepagina • Categoriepagina. Dit is te maken aan de hand van de stappen die ik bij mijn bloktoetsen heb geleerd. Ik heb van Youssef een planning met de datums voor de deadlines (voor de herformulering, Onderzoek incl. tussenpresentatie en voor het eindproduct incl. eindpresentatie). Hieronder de uit te voeren stappen met de data ’s met het plan van aanpak op een rijtje.
De Stappen: • Plan van aanpak inleveren 15-4 voor 12:00 uur • Overleggen over voorkeuren site en logo 26-4 • Concurrenten onderzoek, kleur onderzoek, typografie onderzoek en overig onderzoek 26-4 •
Elke dag als ik eraan werk logboek en onderbouwend verslag bijhouden (elke Dinsdag en Donderdag middag eraan werken. 26-4
• Indien bij tijdnood kom in overleg nog andere middagen of ochtenden eraan werken) 26-4 • 2 stijlen voorstellen uitwerken (weer 2 middagen voor gebruiken) 2-5 • 2 voorstellen inleveren 6-5 voor 12:00 uur • Presentatie van de twee voorstellen 9 -5 13.00 uur, Breda: • Overleggen logo 13-5 • Overleggen en afronden 16-5 • Eindproduct (media-uiting) (en logboek en onderbouwend verslag inleveren) 20-5 voor 12:00 uur geprint • Presentatie van het eindproduct 23-5 13.00 uur Gorinchem • 24-5 Vakantie
Plan van aanpak Benodigde middelen: • • • • •
Laptop Adobe CC Hosting website Producten website Domeinnaam website
Benodigde personen: • Stagebegeleider
Benodigde middelen Eindpresentatie: • Scherm
6
Fase 2 Vooronderzoek
Logboek Voor 9-4 Tijd -
Activiteit Bespreken opdracht en vragen stellen
Benodigde middelen
Resultaat/ afspraken
Word en laptop
Volgende stap
De opdracht is duidelijk Plan van aanpak
9-4 Tijd Activiteit
Benodigde middelen
11:00- Plan van aanpak 11:45 maken
Nakijken van datums en planning bedenken wat haalbaar is en word om te typen en laptop Word en laptop
11:45- Logboek 12:30
11:45- Onderbouwing 12:20
Word en laptop
12:20- Overleggen 12:30
Laptop
Resultaat/afspraken
Volgende stap
Plan van aanpak is af Logboek en En overlegt met stage- onderbouwing begeleider maken
Basis om mee veder te gaan
Onderbouwing afmaken en overleggen met stagebegeleider Overleggen stagebegeleider
Plan van aanpak is goed zo
Inleveren en wachten op akkoord volgen de stap
11-4 Tijd
Activiteit Benodigde middelen
8:45- 8:55 Tekst fouten verbeteren
Word en laptop
Resultaat/ afspraken Geen slordigheid/ spelfouten
Volgende stap Opnieuw inleveren
Logboek
8
17-4 Tijd
Activiteit Benodigde Resultaat/ middelen afspraken
11:15-11:30 Mail met feedback lezen
Telefoon en email
Dat ik met deze stappen aan de slag ga
11:30-12:40 Werkdocument InDesign en gereedmaken en word plan van aanpak overzetten
Volgende stap Werkdocument opmaken en klaarmaken Logboek en onderbouwing vederbijwerken
18-4 Tijd
Activiteit
Benodigde middelen
Volgende stap
12:30-13:00
Werkdocument en plan InDesign en van aanpak veder word bijwerken en opmaken
Starten met vooronderzoek
13:00-14:30
Concurrentieonderzoek InDesign, Google en Pinterest
Doelgroep onderzoek
16:00-17:00
Onderzoek bouwbedrijven
InDesign, Google Ik merk dat er geen huisstijl en Pinterest onderzoek RBT
Logboek 19-4 Tijd
Activiteit
Benodigde middelen
13:40 - 14:02
Huisstijlonderzoek Google RBT
15:25-15:35
Onderbouwing bijwerken
InDesign
Resultaat/ afspraken
Volgende stap
Ik heb het logo Onderbouwing kunnen ontleden. bijwerken Maar wil vragen of er een huisstijlhandboek is van RBT Overleggen met stagebegeleider
23-4 Tijd
Activiteit
Benodigde Resultaat/ middelen afspraken
Volgende stap
10:00-10:05
Overleg met stagebegeleider
Laptop en InDesign
Er is dus geen huisstijlhandboek. Logo is het belangrijkste stijlelement
Morgen uitgebreid overleggen. Veder met onderzoek
13:00-13:20
Documenten ordenen. En logboek bijwerken
Laptop en InDesign
Alle koppelingen werken goed
Verder met onderzoek
13:21-17:15
Kleur en typografie Google en onderzoek InDesign
25-4 Tijd
Activiteit
Benodigde Resultaat/ middelen afspraken
9:00-9:40 Overleg met Laptop en stagebegeleider over InDesign wat er met Corry besproken is
Volgende stap
Er is dus geen Morgen huisstijlhandboek. uitgebreid Logo belangrijkste overleggen. stijlelement Veder met onderzoek
Logboek
10
25-4 Tijd
Activiteit
9:40-13:51
Dieperin stijlkeuzes gaan
Benodigde middelen Google
Resultaat/ afspraken Stijl 1 krijgt langzaam vorm
Volgende stap Veder er dieperin gaan
26-4 Tijd
Activiteit
15:20-17:35
Pinterest bord maken en paar Dingen uit halen
17:36-17:40
Logboek bijwerken
Benodigde Resultaat/ Volgende middelen afspraken stap Illustrator, Eindelijk heeft Google, InDesign stijl 1 voortgang en wordt deze langzaam compleet InDesign
Stijlbord 1 veder vormen en veder met stijlbord 2
Stijlbord 1 veder vormen en veder met stijlbord 2
29-4 Tijd 8:3017:00
Activiteit Logo stijlen uitwerken en stijlbord maken
Benodigde Resultaat/ middelen afspraken Onderzoek en Laptop
Volgende stap
Stap zo goed als af Inleveren en presentatie maken
Logboek 30-4 Tijd
Activiteit
Benodigde Resultaat/ middelen afspraken
8:3014:30
Stijlborden afwerken Onderzoek en en onderzoek beetje Laptop verdiepen
Stap zo afgerond
14:3015:40
Alles nalopen
Alles is netjes opgemaakt en zonder spelfouten
Werkdocument
Volgende stap Alles nalopen
3-5 Tijd 17:1517:30
Activiteit Logo nog beetje aangepast
Benodigde Resultaat/ middelen afspraken Illustrator
Betere voorbeeld
Volgende stap Presentatie
6-5 Tijd 8:3010:00
Activiteit Laatste uitlijning corrigeren
Benodigde Resultaat/ middelen afspraken Illustrator
Beter uitgelijnd
Volgende stap Inleveren en Presentatie
12
Onderbouwing 9-4
Ik heb bij het plan van aanpak vooral gekeken naar wat de belangrijke datums zijn met de deadlines. Daarna heb ik naar de kalender gekeken en ingeschat hoeveel tijd ik nodig heb en wanneer het verstandig is om Dingen in te leveren enzovoort. Daarna heb ik overlegd met mijn stagebegeleider of hij de planning zo goed vindt. Na overleg hebben we geconcludeerd dat de planning zo goed is.
11-4 Ik kwam er nog achter dat er fouten in zaten. Omdat dit niet handig is en ik nog tijd had, heb ik besloten deze te verbeteren en opnieuw in te leveren.
17-4
Nu Ik gister een mail heb gekregen, ben ik begonnen met de tips toe te passen en mijn werkdocument te maken en daar de onderbouwing en logboek in te verwerken en voortaan Daarmee veder te gaan. Ik heb een begin gemaakt waar ik morgen mee veder ga. Daarna ben ik ook van plan om te beginnen met het vooronderzoek.
18-4
Ik heb alles nu netjes opgemaakt en geplaatst in mij werkdocument. Nu ga ik echt beginnen met mijn vooronderzoek. Nu mijn stagebegeleider niet op kantoor is en op vakantie is kan ik minder goed overleggen. Daarom dat ik het overleg van voorkeuren van kleur enz. pas later doe, namelijk volgende week. Dit maakt niet zoveel uit omdat ik door middel van het vooronderzoek al 2 stijlen kan maken. De kleuren uit deze stijlen zijn per stijl verschillend en per stijl moet dus een kleur gekozen worden waarmee door gegaan wordt. Ik ga eerst een concurrenten onderzoekje en doelgroep onderzoekje doen. Door hun sites te bekijken zie ik huisstijlelementen zoals kleur, typografie en het logo. Hierdoor kan ik 2 stijlen bepalen. De concurrenten achterhaal ik door op Google te zoeken op Bouwborden. De doelgroep door de top 15 van de Cobouw top 50 te pakken Na de top 10 krijg je veel kleine/minder bekende bedrijven. Om de stijl duidelijk te achterhalen heb ik kozen de top 12 gepakt omdat deze het meeste gezien worden en dus ook het meeste met de bouw in verband worden gebracht.
Onderbouwing 19-4
Door naar de huisstijl van RBT te bestuderen wil ik kijken of dit mogelijk een stijl keuze kan worden omdat veel concurrenten drukkerijen zijn die deze producten als extra aanbieden. Ook wil ik nagaan of er een huisstijl handboek is. Wanneer dit niet zo is kan ik de elementen uit het logo pakken.
19-4
In Mijn concurrenten onderzoek zie je duidelijk dat de sites die op de 1e pagina van Google vindbaar zijn, vooral drukkerijen zijn die dit als extraatje erbij doen Dit brengt mij op het idee om de huisstijl van RBT in stijl 1 erbij te betrekken met eventueel een andere kleur voor wat nu blauw is of wat wit is. De kleuren moet ik nog onderzoeken met een algemeen kleurenonderzoek. In mijn doelgroep onderzoek valt mij op dat zowel de doelgroep als concurrenten geen hele vaste kleuren hebben. Wel zie je dat de bouw toch sneller dikkere letters gebruikt. De 2 verschillende stijlen moeten wel wat verschillen bevatten. Stijl 1, Onderdeel van Reclameborden Totaal: Omdat de concurrenten over het algemeen het als extra erbij doet en Bouwprint.com onderdeel is van RBT gaat concept/stijl 1 in op de stijl van RBT met als aanpassing dat het blauwe een andere kleur wordt. Dit zou bijvoorbeeld oranje, rood, donkerblauw of groen kunnen zijn. Aangezien deze bij de bouwbedrijven ook wordt gebruikt. De stijl blijft dus strak en kent niet veel bouwelementen. Stijl 2, Op ons kan je bouwen: Deze stijl moet zich meer richten op de bouw. Er moeten meer bouwelementen in. Het logo bijvoorbeeld komt in iets wat voor de bouw gebruikt wordt.
23-4
Ik heb gekeken wat mijn doelgroep als hoofdkleuren voor hun site/logo gebruikt en wat hun lettertype is. Mijn conclusie is dat deze stijl heel erg standaard is en dat ik toch op Pinterest enzovoort ietsje meerinspiratie moet opdoen om de stijl wat minder strak en toch meer van het strakke af te komen en echt 2 verschillende stijlen neer te zetten. Nu wil ik zoals ik 19 April al zijn stijl 1 echt inzetten op de strakke stijl van Reclameborden totaal die gewoon een standaard website toont met een hoofd en steun kleur. Bij stijl 2 ga ik echt het bouw gedeelte benadrukken. Dit zie je vooral terug in de kleuren en logo.
14
Onderbouwing 25-4
De dag begon dit keer met dat mijn stagebegeleider met Corry heeft besproken hoe het plan van aanpak is. Deze had een beetje weinig structuur. Een deel van de tips van Corry had ik toegepast, maar ik heb de tips van Leon er ook bij gepakt en daardoor nog een paar kleine aanpassingen gedaan. Veder ben ik dieperin de stijl van bouwbedrijven gegaan door ook te kijken wat groothandelaars in de bouw als stijl gebruiken. Ik heb ook een woordspin gemaakt in de hoop dat ik minder vastloop dan wat op dit moment gebeurt. Een stijl wil ik vooral strak houden en 1 stijl moet naar RBT verwijzen, deze is ook al best strak. Ik wil dus kijken of ik door de kleuren en lettertype al genoeg verschil kan creëren of dat ik toch een stijl strak moet doen en 1 stijl speels.
26-4
Door te Mindmappen en op Pinterest te kijken heb ik een paar ideeën die als stijl kunnen functioneren. Deze stijl moet minder strak zijn door een letter of iets anders in het logo zo te maken dat het niet een standaard letter of logo is. Nu is het tijd om logo’s te schetsen ik wil namelijk het RBT-logo ook ietsje tweaken en wat meer een bouw gevoel geven. Dit door de letter wat dikker te maken en er een element aan toe te voegen. Bij stijl 1 heb ik zoals ik wou de stijl van RBT als basis genomen. RBT Heeft als logo idee een v-bord doorgevoerd. Omdat Bouwprint geen v-borden verkoopt heb ik de flappen weggehaald. Doordat je dan een zwart vlak over houdt krijg een best strak logo. Omdat uit mijn onderzoek is gebleken dat erin de bouw wat dikkere lettertypes worden gebruikt en ik niet wou afwijken van het lettertype heb ik gekozen voor de condensed black versie van Din pro. Din pro is namelijk het lettertype wat RBT ook gebruikt Omdat geel, oranje, zwart en grijs in mij onderzoek als mogelijke kleuren naar voor kwamen heb ik deze getest op de al bestaande zwarte achtergrond van RBT. Daar kwam in uit dat oranje het beste op de zwarte achtergrond paste. Omdat wit neutraal is en als bij RBT gebruikt werd heb ik ervoor gekozen beide woorden een andere kleur te geven. Doordat .com er ook nu in moet komen en dat het logo minder krachtig maakt als je dat eronder zet heb ik gekozen om .com er net buiten te laten vallen. Zo wordt het logo net ietsje opvallender omdat dit niet heel snel standaard is. Om te zorgen dat dit altijd werkt heb ik ook een negatieve versie gemaakt
Onderbouwing 29-4
Vrijdag heb ik met mijn stagebegeleider nog in de auto overlegd en gebrainstormd. Ik rij namelijk 4 keer per week gedeeltelijk met hem mee. Het gesprek ging over de naam. Namelijk of het bouwprint moet zijn of bouwprint.com. In mijn redenatie gebruikte ik Bol.com als voorbeeld. Dit merk heeft namelijk .com in zijn naam. Veder door.com in je naam te gebruiken laat je zien dat je niks met bijvoorbeeld bouwprint.be te maken hebt. Dit zorgt dat stijl 1 ietsje meer aangepast moest worden. Hierdoor heb ik mijn onderbouwing ietsje aangepast. Voor stijl 2 heb ik gekeken naar wat echt bij de bouw past. Zo heb ik gekeken naar lettertypes, kleuren enz. Hieruit blijkt dat zwart met geel het beste past bij deze stijl met een dik font. Qua vorm heb ik gekeken naar voorwerpen. Zo ben ik begonnen met een hoogwerker, bulldozer, bouwhelm en hijskraan. Uiteindelijk zijn er 2 veder uitgewerkt en langzaam veranderd naar het uiteindelijke resultaat. Door de reflecterende strepen valt het logo nog meer op en past het meteen nog meerbij de bouw.
30-4
Vandaag heb ik vooral de stijlkaarten afgerond. Ook heb ik Wordpress een beetje getest om de desbetreffende mogelijkheden te achterhalen. Veder heb ik gekeken naar wat Pyber vooral gedaan heeft bij RBT. Dit is voor stijl 1 heel belangrijk. Voor stijl 2 heb ik nog een beetje dieper onderzoek gedaan om alles nog beter te kunnen onderbouwen. Ook heb ik een paar voorbeelden gegeven. Nu is het alleen nog alles controleren en dan is het een presentatie maken.
3-5
Het logo bij stijl 1 heb ik nog een beetje aangepast. De bouwhelm is bij stijl 1 de toevoeging die ik heb gedaan om het logo toch meerbij de bouw te betrekken. Ik heb gekozen om de helm op de i te zetten om dit als punt te laten functioneren. Door de helm de kleur te maken die het woord bouw is, zorgt dit dat het duidelijk bij elkaar hoort. De schaduwstrepen zijn dezelfde kleur als het woord print, dit om ook print een kleine bijdrage vormt in de naam.
16
Mindmap en schetsjes
Onderbouwing
Omdat ik vastliep heb ik maar even een Mindmap gemaakt. Dit gaf mij al wat ideeĂŤn voor stijl 2. Vandaar de schetsjes aan de zijkant
Schetsen stijl 2
Onderbouwing
Hier de originele schetsen van de ideeĂŤn die ik had voor bouwprint.
18
Pinterest onderzoek
Concurrenten onderzoek
20
Doelgroep onderzoek
Font: DTL argo
Font: Balance bold
Font: Helvetica neue
Font: Intervalnextwide
Font: Oswald
Font: Lucida sans
Font: PT Sans
Font: Monsterrat
Font: Freeroad
Font: Eurostile
FOnt: Lulo one BOUW
Font: Lato BOUWPRINT
RBT-huisstijl onderzoek C 55 M0 Y0 K 15 C0 M0 Y0 K 100
Lettertype-familie: Din-Cond
22
RBT-huisstijl onderzoek
Onderbouwing
Voor stijl 1 heb ik gekeken wat Pyber (het bedrijf die op dit moment de nieuwe RBT-website uitwerkt) doet qua stijl. Dit omdat stijl 1 vooral de stijl van RBT voor 85 procent wil weerspiegelen.
Pinterest onderzoek https://nl.Pinterest.com/arjentoonstra/bouwprint/
24
Bouwspullen
Logo afleiDing stijl 1
BOUW PRINT .COM
BOUW PRINT
BOUW PRINT
BOUW PRINT
BOUW PRINT
BOUW PRINT
BOUW PRINT
BOUW PRINT
BOUW PRINT
BOUW PRINT
BOUW PRINT
BOUW PRINT
BOUW PRINT
ONDERDEEL VAN RBT
BOUW PRINT .COM
ONDERDEEL VAN RBT
BOUW PRINT .COM
ONDERDEEL VAN RBT
BOUW PRINT .COM
BOUW PRINT
26
Logo afleiding stijl 2
BOUWPRINT .COM
bouwprint.com
BOUWPRINT.COM
BOUWPRINT.COM
Stijlkaart 1: Onderdeel van RBT Font logo: Font kop: Font tekst:
Din pro condensed black Din pro condensed bold Din pro regular
C 0,11 R 248 M 38,76 G 170 Y 92,97 B 22 K 0,02 C 95 M 42 Y0 K 93
R1 G 11 B 19
Voorbeelden elementen De kleuren en lettertypes staan duidelijk vast. Omdat deze stijl gebaseerd is op RBT, en de site pas volgende week pas echt af is heb ik 3 puntjes die sowieso terug moeten komen. Veder staat er niet veel vast, zolang de elementen maar van RBT af te leiden zijn. De kleuren worden natuurlijk veranderd naar de kleuren van bouwprint.
De achtergrond en garantie label staan vast, het product veranderd telkens maar is geĂŻllustreerd
Blauw wordt vervangen door zwart met Oranje kop en witte broodtekst
Stijlkaart 2: Op ons kun je bouwen
28
BOUWPRINT.COM
BOUWPRINT.COM
Font logo:
Monsterrat black
Font kop:
Monsterrat bold
Font tekst:
Monsterat regular
C0 M 20,31 Y 92,58 K0
R 255 G 204 B7
C 95 M 42 Y0 K 93
R1 G 11 B 19
Voorbeelden elementen
diverse bedrijfsunits
MO
D E L T U I NF R
10
E AM
DI T
De kleuren en lettertypes staan duidelijk vast. Omdat deze stijl gebaseerd is op de bouw komen de kleuren vaker terug ook de knoppen krijgen de bouwprint kleuren. Indien mogelijk, maar dat is kijken wat Wordpress toelaat wil ik ook een menubalk die net als bouwprint zwart is met gele markeringen aan de zijkant. Door de knoppen in dezelfde stijl als logo te maken wordt het al meer 1 geheel. Veder nog wat kleine elementjes zoals een product foto met als achtergrond een bouwplaats. Veder gewoon de kleuren aanhouden en kijken wat mogelijk is. Er staat minder vast dan bij RBT alleen moet het wel aan de bouw gelinkt kunnen worden.
JAAR
GAR
ANTIE
BEDRIJFSMAKELAARS
023 - 532 55 33
De usp moet duidelijk getoond worden. Alleen dan met zwarte achtergrond en gele markeringen aan de zijkant. De achtergrond en garantie label staan vast, het product veranderd telkens maar is geĂŻllustreerd.
Winkelwagen indien mogelijk in een bouw uiterlijk. Dit is een voorbeeld.
Sidebar in zwart en geel maar dan meerin logo stijl.
Plan van aanpak Herformulering: De opdracht bestaat uit 3 media-uitingen. Deze maak ik aan de hand van de procedure die ik geleerd hebt bij de bloktoetsen. Er is gekozen voor de volgende media-uitingen: • Een logo • Homepagina • Categoriepagina. Dit is te maken aan de hand van de stappen die ik bij mijn bloktoetsen heb geleerd. Ik heb van Youssef een planning met de datums voor de deadlines (voor de herformulering, Onderzoek incl. tussenpresentatie en voor het eindproduct incl. eindpresentatie). Hieronder de uit te voeren stappen met de data ’s met het plan van aanpak op een rijtje.
De Stappen: • Plan van aanpak inleveren 15-4 voor 12:00 uur • Overleggen over voorkeuren site en logo 26-4 • Concurrenten onderzoek, kleur onderzoek, typografie onderzoek en overig onderzoek 26-4 •
Elke dag als ik eraan werk logboek en onderbouwend verslag bijhouden (elke Dinsdag en Donderdag middag eraan werken. 26-4
• Indien bij tijdnood kom in overleg nog andere middagen of ochtenden eraan werken) 26-4 • 2 stijlen voorstellen uitwerken (weer 2 middagen voor gebruiken) 2-5 • 2 voorstellen inleveren 6-5 voor 12:00 uur • Presentatie van de twee voorstellen 9 -5 13.00 uur, Breda: • Overleggen logo 13-5 • Overleggen en afronden 16-5 • Eindproduct (media-uiting) (en logboek en onderbouwend verslag inleveren) 20-5 voor 12:00 uur geprint • Presentatie van het eindproduct 23-5 13.00 uur Gorinchem • 24-5 Vakantie
30
Fase 3 Uitwerking gekozen stijl
Logboek
13-5-19 Tijd Activiteit 9:5510:31
Starten Fase 3
10:31- Logo ontwerp 15:50
Benodigde middelen
Resultaat/afspraken
Volgende stap
InDesign
Opzet werkdocument fase 3 staat
Begin logo
Cmyk kleuren, Illustrator
Logo en kleuren af
Website homepagina
Onderbouwing 13-5 Vorige week Donderdag heb ik mijn tussenpresentatie gehad. Deze heb ik met een voldoende afgerond. Er is gekozen voor stijl 1. Wel wilt mijn opdrachtgever de markeringen gebruiken uit stijl 2 en ook is het logo ook nog aan veranderingen toe. Ik ga ook de weergave in mijn werkdocument anders doen. De onderbouwing komt nu namelijk meteen bij het onderwerp te staan. Dit omdat de komende onderbouwingen het belangrijkste zijn.
Logboek
32
14-5-19 Tijd Activiteit 9:5510:31
Benodigde middelen
Vooronderzoekje Google websites
Resultaat/afspraken Meerinfo over websites
Volgende stap Starten ontwerpen XD
10:31- Ontwerp 13:00 XD-homepagina
XD,
Website gebaseerd op Bespreken/aanpasRBT ontwerp sen
13:00- Opzet Website 16:15 homepagina
Wordpress
Basis website staat
Lettertype onderzoek
16:15- Lettertype 17:15 onderzoek
Google fonts
Lettertype die er heel sterk op lijkt
Veder met opzetten homepagina/ content maken
15-5-19 Tijd Activiteit 8:3015:00
Content homepagina maken
Benodigde middelen
Resultaat/afspraken
Volgende stap
Illustrator
Content voor homepagina
Homepagina en header maken
15:00- Homepagina 17:15 maken
Wordpress
Homepagina voor 80% klaar
Puntjes verbeteren
19:00- Puntjes 21:00 verbeteren
Wordpress
Alleen banner moet banner verbeteren nog verbeterd worden en menu aanmaken
Logboek 16-5-19 Tijd Activiteit 8:3013:56
Homepagina afronden en header en top bar afmaken
13:56- Content maken 17:15
Benodigde middelen
Resultaat/afspraken
Volgende stap
Wordpress, hulp van ICT student
Het logo staat nu over Categorie pagina de header. Hierbij heb en content maken ik hulp gevraagd aan een ICT student
Illustrator
Product content, Categoriepagina en header zijn af
Categorie pagina opmaken
17-5-19 Tijd Activiteit 8:309:24
Logo negatief heroverwegen
Benodigde middelen Illustrator
13:56- Categorie pagina Wordpress 17:15 afronden
Resultaat/afspraken Logo toch oranje inplaats wit
Volgende stap Categorie pagina maken en negatief logo onderbouwen
Categorie pagina is Werkdocument klaar en goed gekeurd afronden door stagebegeleider
34
Gekozen stijl Font logo: Font kop: Font tekst:
Din pro condensed black Din pro condensed bold Din pro regular
C 0,11 R 248 M 38,76 G 170 Y 92,97 B 22 K 0,02 C 95 M 42 Y0 K 93
R1 G 11 B 19
Voorbeelden elementen De kleuren en lettertypes staan duidelijk vast. Omdat deze stijl gebaseerd is op RBT, en de site pas volgende week pas echt af is heb ik 3 puntjes die sowieso terug moeten komen. Veder staat er niet veel vast, zolang de elementen maar van RBT af te leiden zijn. De kleuren worden natuurlijk veranderd naar de kleuren van bouwprint.
De achtergrond en garantie label staan vast, het product veranderd telkens maar is geĂŻllustreerd
Blauw wordt vervangen door zwart met Oranje kop en witte broodtekst
diverse bedrijfsunits
MO
D E L T U I NF R
10
E AM
DI T
Wat erbij is gekomen uit stijl 2
JAAR
GAR
ANTIE
BEDRIJFSMAKELAARS
023 - 532 55 33
We willen het bouwlint lichtjes erin terug laten komen De achtergrond van stijl 2 vindt mijn begeleider veel mooier om voor bouwprint te gebruiken
Onderbouwing 13-5 Mijn stagebegeleider wilt dus 2 elementen uit stijl 2 eventueel toevoegen. Tijdens de tussenpresentatie zei Corry dat dit gewoon kon. Veder moeten we nog kijken hoe we het helmpje in het logo verwerken of misschien toch maar weg moeten laten
36
Logo ontwerp
.com .com BOUW PRINT .COM
BOUW PRINT .COM BOUW PRINT .COM BOUW PRINT .COM BOUW PRINT .COM BOUW PRINT .COM
Logo ontwerp
BOUW PRINT .COM
C 0 M 64 Y 100 K0 C 95 M 42 Y0 K 93
BOUW PRINT .COM
R 238 G 117 B9 R1 G 11 B 19
Onderbouwing 13-5 Na veel gepuzzel met het helmpje kwamen ik samen in overleg met mijn stagebegeleider tot de conclusie dat deze niet goed zichtbaar zou worden of te groot werd als punt wat het idee was. Na overleg hebben we maar besloten het helmpje in te ruilen voor de markeringen. De kleur oranje moest ook nog bepaald worden. Na wat Googlen naar oranjekleuren, kijken naar het geprinte en digitale resultaat enzovoort, zijn we op de definitieve kleur oranje gekomen.
38
Website Homepagina onderzoek
Website Homepagina
40
Website Homepagina
Onderbouwing 14-5 Tijd om aan de homepagina te beginnen. Ik heb natuurlijk de site van RBT als basis genomen. Deze wordt zoals ik al eerder heb vermeld onder handen genomen door Pyber. Voordat dit gebeurde heb ik een schets mogen maken in XD om de wensen duidelijk te maken aan Pyber. Dit heeft nu als voordeel dat ik dus de grote wensen weet. Als ik de stijl erin verwerk heb ik een goed resultaat die voldoet aan de eisen en wensen. Mijn plan is dus ook dit in XD eerst kort op te zetten. En daarna in Wordpress te maken. In de tussentijd overleg ik natuurlijk en pas ik het plan aan de beperkingen die ik in Wordpress ervaar.
Website Lettertype
42
Onderbouwing 14-5 De eerste uitdaging stond al meteen om de hoek. Namelijk het lettertype van het logo was niet makkelijk in Wordpress te krijgen. Als ik namelijk op mijn manier alles verving koste het 10 euro. Dat zou niet erg zijn maar ook de icoontjes werden dan vervangen en daardoor niet meer zichtbaar. Daarom heb ik een Google font lettertype gezocht die er zo veel mogelijk op lijkt. Na zoeken kwam Oswald als winnaar eruit. Dit lettertype wordt dus de nieuw kop en brood font. Dit moet natuurlijk wel overal doorgezet worden om het niet op te laten vallen. Vandaar dat dit zowel voor digitaal als drukwerk geld. Het logo houdt wel gewoon Din pro condensed bold. In mijn onderzoek zie ik namelijk heel vaak dat websites een Google font pakken die anders is dan hun logo en meer leesbaar is.
Website Homepagina
Onderbouwing 16-5 De tijd vliegt en na veel werk aan de content en homepagina is deze zo goed als af. Het logo heb ik nu zo neergezet dat deze zowel de top bar als header bedekt. Dit om het logo wat groter te tonen en RBT heeft dit ook. Alleen daar valt de flap erbuiten. Na kijken of het logo buiten de header te laten vallen kwamen we tot de conclusie dat dit niet werkt en het mooiste dus is als het logo tussen de top bar en header valt. Om dit logo zo te krijgen heb ik Nick van pelt om hulp gevraagd. Deze student zit ook op Da Vinci en doet nu nadat hij ICT heeft afgerond, modevormgeving in Dordrecht .
44
Logo ontwerp
BOUW PRINT .COM
C 0 M 64 Y 100 K0 C 95 M 42 Y0 K 93
BOUW PRINT .COM
R 238 G 117 B9 R1 G 11 B 19
Onderbouwing 17-5 Voor mijn eindpresentatie heb ik met mijn stage geregeld dat ik de logo’s op een bordje kan drukken. Het ene bordje is positief en de andere negatief. Bij de negatieve kwam het witte niet helemaal uit. Daarom dat ik toch heb gekeken naar het alternatief oranje. Na overleg kwamen we tot de conclusie dat deze net wat beter is op zwart of een andere donkere achtergrond. Dit laat ook het negatieve logo goed opvallen
Website Categorie pagina onderzoek
46
Website Categorie pagina
Onderbouwing 17-5 De categorie pagina was wat lastiger. Dit omdat ik het eindproduct al in Wordpress wou maken. Alleen omdat het geen geld moet kosten en ik niet een Wordpress expert ben is het ontwerp wat simpeler dan ik in gedachte had. Zo kan ik de tussenruimte en product achtergronden niet aanpassen zonder paar honderd euro te betalen. Sociale media zoals RBT gebruikt lukt ook niet omdat Bouwprint nog aan het opstarten is. Reviews en reacties zijn er dus ook nog niet. Wat je dus over houdt is een simpel en eenvoudig ontwerp. Dit ook omdat mijn stagebegeleider de SEO boven de lay-out stelt. Een goed voorbeeld is daarom ook EHB-koffer. Deze site scoort op SEO heel hoog
Homepagina onderbouwing Logo over top en header om groter te zijn net als RBT-site
Direct contact oranje om meer op te vallen net als op de RBT-site
Header en top bar zoals deze bij de RBT-site is Alle illustraties hebben oranje inplaats blauw als steun kleur
Zwarte balk met witte tekst om het niet te druk te maken Balk zwart met de markeringen om deze in de bouwstijl op te laten vallen Koptekst op zwart oranje om beter op te vallen Broodtekst wit om goed leesbaar te zijn
CA-knoppen zijn altijd oranje met witte tekst Bestverkochte producten in carrousel zoals in het RBTontwerp met de gewenste eisen van mijn stagebegeleider
Recente klanten zoals gewenst in wireframe ontwerp van nieuwe RBT-site en zoals op de huidige site ook wordt weergegeven
Footer zoals bij RBT is besloten
48
Homepagina
Categorie pagina onderbouwing Content onder aan de pagina zoals ook bij RBT gaat gebeuren. Dit om de pagina content rijk te maken en zo de SEO te versterken CategorieĂŤn in sidebar zoals in RBT wireframe en voorkeuren stagebegeleider
Deel optie zoals gewenst en zichtbaar op RBT wireframe
50
Categorie pagina
In het maken van de website heb ik zoveel mogelijk RBT en met gekeken naar het wireframe met de wensen van mijn stagebegeleider. Dit is groot en deels gelukt. De reviews, comments en social media zijn niet mogelijk te tonen omdat deze simpel weg nog niet bestaan. De belangrijkste wens was om de site snel SEO geoptimaliseerd te maken. Daar heb ik zeker rekening mee gehouden met het ontwerpproces. Dit is ook de reden dat erbij de categorie pagina gekozen is voor een sidebar en veder een simpele lay out. Ik heb waar mogelijk aangepast in de stijl van bouwprint. Helaas zijn er ook beperkingen in Wordpress die ik in overleg voor lief genomen heb.