Toen ik begon met de opdracht kreeg ik van Emke de opdracht uitgelegd. Simpelweg: Er moet een redesign komen van de website. Meestal gaat dat wel eventjes anders. Het ontwerpproces voor het maken van een website ziet er meestal als volgt uit:

• Gesprek over de wensen van de klant
• Offerte
• Wireframes
• Designen: Desktop, mobiel, klikbaar prototype
• Programmeren
• Teksten
• Foto en film
• Akkoord
• Live

De stappen die ik heb ondernomen zijn:

• Gesprek met Emke van wat is de opdracht
• Wireframes + Feedback momenten
• Designen + Feedback momenten
• Presentatie met klant
• Planning maken hoe programmeren
• Programmeren + Feedback momenten
• Presentatie met klant + bespreken wat de klant aan ons moet aanleveren
• Bugs fixen
• Live

Met deze opdracht heb ik hulp gekregen door Yvanca, Paul en 1 x Paul bij ontwerpen en heb ik hulp gekregen van Emke bij het programmeren. Op dit moment deed ik zelf designen en programmeren waardoor het een zelfstandige opdracht werd. Als ik alleen zou programmeren of designen denk ik dat ik wel meer met andere collega’s in gesprek ben gegaan om dingen te bespreken.

Zelfstandig werken aan Bikkeltraining voor de 20 weken was een mooie uitdaging waarbij ik veel heb geleerd en heb gezien hoe het is om te werken in het bedrijfsleven.

Met de opdracht: Devani Nextjs ben ik begonnen met dit leerdoel. Hierbij leerde ik hoe Nextjs werkte. Ik begon met de tutorial Learn Nextjs. Daarna had Emke met mij ook nog Nextjs doorgenomen. Door hem leerde ik de volgende punten:

• Routing: Met mappen structuur routing bepalen
  Pages: In app folder heb je page.js en dat is je index.html
  Layout: Alles wat op dezelfde pagina terugkomt, kan hierin worden gemaakt
• Export default function Example(): Op deze manier maak je een soort DOM met JSX.
  Return(): Alles wat hier tussen staat wordt teruggegeven om de soort DOM te maken met JSX.
• Css Modules: Bij een aparte component kan je een aparte CSS file maken specifiek voor die component
• Componenten: Wat meerdere keren terugkomt, kan in een component en dat declareer je.
• Data: Data fetchen en met behulp van componenten data weergeven

Nadat Emke mij de basis van Nextjs had uitgelegd ging ik aan de gang om de huidige Devani website om te bouwen naar Nextjs. De huidige website is gemaakt met Gatsby. Ik leerde met de eerste tutorial en door Emke dat Nextjs iets te maken had met React. Nextjs en React kwamen samen. Ik heb nog nooit eerder met React gewerkt dus ik snapte eerst niet wat React is en wat Nextjs is. Daardoor vond ik het nog lastig om met Nextjs te werken.

Emke stelde mij voor om wat React en Nextjs tutorials te volgen om beter te worden met beide frameworks. Daarvoor heb ik de volgende tutorials gevolgd:

• Glitch
• Codecademy
• Scrimba
• MasteringNextJs
• Udemy

De cursus van Scrimba over React vind ik het beste. Daar leerde ik door oefeningen te doen hoe je moet werken met React. Daar zag ik dat het eigenlijk gewoon Nextjs is.

Masteringnextjs vond ik minder goed doordat het een oudere versie is. De Nextjs Udemy cursus is een goede vervanging daarvoor. Het is betaald dus ik kon alleen de eerste gratis filmpjes kijken. Door die cursus leerde ik wel wat nu het verschil is tussen React en Nextjs. Door die cursus heb ik geleerd dat Nextjs gewoon React is maar dan makkelijker en sneller. Want bijvoorbeeld routing door mappen structuur heb je niet in React. Dus ik weet nu goed het verschil tussen React en Nextjs.

Door de Scrimba cursus heb ik geleerd wat Props en Hooks zijn waardoor ik alle vaardigheden in mijn Stappenplan voorstel heb behaald. Props: Data meegeven aan je componenten, Hooks: React functies kunnen doen in componenten zoals States.

Met dit leerdoel heb ik geleerd wat Nextjs is en heb ik ontdekt dat het best wel erg lijkt op wat ik heb geleerd met Blok Tech en dat ik verder wil werken met deze framework voor in de toekomst.

Met grote opdrachten zoals Bikkeltraining, Devani Nextjs ben ik eigenlijk de hele tijd bezig geweest met feedback vragen. Er kwam geen einde aan zowat. Maar met simpele opdrachten zoals Logo Animatie of de HTML5 banners heb ik niet echt feedback nodig omdat het kleine en snelle opdrachtjes zijn die ook niet zo moeilijk waren.

Door de Bikkeltraining Design opdracht had ik geleerd dat er ook een andere manier van feedback geven bestaat dan alleen maar Bulletpoints en zelf uitwerken. Zie Leermoment.

Met die opdracht heb ik ook de meeste feedback gekregen en dan blijf je maar verbeteren waardoor ik alleen maar bezig was met kritisch kijken en verbeteren.

Bij de Devani Nextjs opdracht is feedback vragen weer anders. Dat is meer: Kan je me helpen en dan geeft Emke mij het antwoord of laat hij mij beter kijken naar het probleem waardoor ik uit mezelf het antwoord kan vinden.

Als je gaat vergelijken is feedback van design en feedback van programmeren heel erg anders. Want bij design heb je wel 30 oplossingen voor een probleem en met programmeren is het meestal 1 of 2.

Ik wilde graag stage lopen als front-end developer. Dat was mijn hoofddoel. Daarbij kwam nog design als 2e doel. Aan begin van mijn stage dacht ik dat ik programmeren leuker vond dan designen. Maar naarmate de tijd had ik ook gezien dat ik niet 8 uur op een dag alleen maar kan programmeren waardoor ik afwisseling fijn vind in het werk. Dus dan denk ik om toch maar terug te gaan naar designen waardoor ik het graag als beide wil hebben in mijn werk carrière.

Door dit leerdoel heb ik geleerd dat er verschillende manieren zijn van feedback ontvangen.

• Notities en dan zelf verbeteren
• Een nieuw design
• Antwoord vragen voor programmeren

Vooral met de opdracht Bikkeltraining Programmeren ben ik meer kritischer gaan kijken naar mijn werk en heb ik mezelf verbeterd met dit leerdoel.

Met dit leerdoel heb ik geleerd om te werken met Sketch. Ik had al eerder gewerkt met Sketch, maar met deze stage ging ik er dieper op in. Ik begon met korte Sketch YouTube tutorials en Yvanca leerde mij Sketch Shortcuts. Zie Bikkeltraining Wireframes Tips. Ik begon met Sketch met de opdracht Bikkeltraining wireframes. Verder ging ik door met de Bikkeltraining Design waardoor ik de volgende vaardigheden heb geleerd bij die 2 eerste Sketch opdrachten:

Componenten

Componenten moet je zo specifiek mogelijk maken, want je kan ze later niet meer als component uitgebreid veranderen. Dat is waar ik aan moest wennen, want in Adobe XD kan dat wel. Het enige wat je kan veranderen in een component is Tekst input en kleur als je Kleur componenten hebt gemaakt.

Grid/Layout

Ik heb geleerd dat je kan werken met die 2 principes. Grid zijn de vaste lijnen en Layout zijn de doorzichtige kolommen. Eerst vroeg ik me altijd af: Waarom zou je Layout gebruiken? Want ik gebruik alleen maar Grid. Er werd mij verteld dat Layout kan zorgen voor kalmte als alles even breed is uitgelijnd. En het is ook makkelijk voor Bootstrap. Door die redenen ben ik er meer voor open gaan staan en begrijp ik waarom je dat doet en denk ik dat ik dat ook ga gebruiken voor in de toekomst. Er werd mij ook verteld dat niet alles precies in de Layout hoeft te vallen dus ik moet zelf nog wel bepalen: Wat doe ik tussen de Layout en wat niet.

Tafel van 4

Eerst snapte ik nooit waarom iemand margin-top: 12px; zou doen bijvoorbeeld. Maar nu snap ik dat wel. Bootstrap, maar ook dan heb je niet random ademruimtes. Ik deed altijd tafel van 5 omdat ik dacht dat is mooi afgerond, maar als je meer specifiekere ademruimtes wilt hebben kan je beter tafel van 4 gebruiken. Voor mijn eigen projecten ben ik wel nog geneigd om tafel van 5 te gebruiken, maar misschien zal dat veranderen in de toekomst.

Typografie

In Sketch kan je je Typografie stijlen verdelen in groepen door een / toe te voegen. In voorbeeld heb je: Body 2/Grijs. Op die manier maak jij je typografie stijlen overzichtelijk.

Prototyping

In Sketch kan je basis prototypes maken door pagina’s met elkaar te verbinden. Je kan kiezen uit de Targets om te verwijzen naar welke pagina. Zo kan je je documenten ook netjes maken door verschillende pagina’s te hebben voor je artboards i.p.v. dat je al je artboards op 1 pagina hebt staan. Verder kan je nog met shortcut h zelf een vierkantje tekenen om dat gebied te lijden naar een pagina als je daarop klikt. Als laatste had ik nog geleerd hoe je een overlay prototype maakt voor een pop-up of navigatie menu zodat je niet naar een aparte pagina hoeft te gaan voor die specifieke functie.

Exporteren

Exporteren gaat gewoon simpel en welsprekend. Zij exporteren niet bestanden om het te sturen naar de klant. Dan sturen zij de Sketch link. Wel exporteren zij uit Sketch om een social Media post te maken. Dan doen zij dat als PNG-format voor betere kwaliteit.

Img

Met plaatjes plaatsen als componenten is het een struggle werk want dan moet het plaatje dezelfde maten hebben als het originele plaatje, anders gaat het stretchen. Wel heb ik geleerd van Paul Bakker om Img te gebruiken als fill optie zodat de img altijd mooi blijft. Wel pakt hij de img uit center waardoor je niet handmatig de img kan verschuiven.

Door het leren van Sketch heb ik ontdekt dat ik Adobe XD beter vind dan Sketch. Vroeger vond ik Sketch wel beter dan Adobe XD. Maar nu is Adobe XD zoveel verbeterd waardoor ik Adobe XD beter vind. Zij vertelde mij dat zij ook nog zaten te denken om over te stappen naar Figma. Figma is ook een goed programma, maar daar moet ik nog over leren om het te begrijpen en te gebruiken. Met deze punten heb ik al mijn vaardigheden behaald voor dit leerdoel.

Met dit leerdoel wilde ik graag beter worden met presenteren. In totaal heb ik 3 echte presentaties gehouden.

• Bikkeltraining Design
• Bikkeltraining Programmeren
• Ai Presentatie

Ik begon met het design presenteren van Bikkeltraining. Ik begon gewoon en het was meer iets laten zien dan een echte presentatie zoals de Ai presentatie. Maar van de Designpresentatie heb ik wel het meest geleerd. Emke gaf mij goede feedback om mezelf te verbeteren. Die feedback nam ik mee naar de andere 2 presentaties waardoor mijn presentatie skills vooruit gingen na al 1 presentatie.

Wat ik het meeste heb geleerd van de designpresentatie is dat school heel erg anders is dan in het bedrijfsleven. Want op school hoef je niet een intro te hebben met wat je gaat vertellen, omdat je presenteert aan docenten die de opdracht al weten. Maar in het bedrijfsleven is dat niet zo. Klanten van een reclamebureau weet helemaal niet wat een CMS, Wireframes etc. zijn. Dus een goeie opening is wel belangrijk in het bedrijfsleven. In het bedrijfsleven is het belangrijk dat je rustig aan presenteert, zodat de klant jou kan begrijpen, omdat ze jouw vakgebied niet kennen.

Door de feedback van de eerste presentatie, had ik een goede opening bij het presenteren van de geprogrammeerde website. Ook een goede afsluiting waarbij ik vertelde wat we net besproken hebben, wat de klant van mij kan verwachten en wat ik van de klant kan verwachten.