Situatie
Het was mijn derde week stage bij DutchGiraffe. Ik had mijn eerste online magazine ontworpen in Figma, de volgende stap was om dit magazine te gaan bouwen in WordPressMagazines (WPM). Om het magazine te kunnen bouwen in WPM, had ik eerst een uitleg nodig van Mirthe (bedrijfsmentor). Zij was ook mijn contactpersoon bij vragen tijdens het uitvoeren van de taak. De hele taak heb ik uitgevoerd op het kantoor van DutchGiraffe in Den Haag.
Taak
Het bouwen van mijn eerste ontworpen magazine in WPM 3.0. Het ontwerp bestaat uit acht pagina’s maar in deze taak heb ik de eerste drie pagina’s beschreven. Dit magazine moest ik bouwen omdat ik deze opdracht kreeg van mijn bedrijfsmentor als eerste oefening met het programma WPM dat veel gebruikt wordt bij DutchGiraffe. Het doel van deze taak was dit programma dan ook te leren kennen, daarnaast was het ook voor de ervaring van een online magazine te creëren binnen een week tijd. Daarbij waren niet alle ontwerp keuzes mogelijk om na te bouwen, hiervoor moest ik alternatieve ontwerpen maken en deze bouwen. Als tip kreeg ik ook om bij mijn ontwerp te bekijken welke verschillende componenten van WPM ik kon uitproberen.
Actie
In een week tijd moest ik mijn ontworpen eerste online magazine nabouwen in WPM. Hiervoor heb ik eerst alle foto’s uit Figma geëxporteerd en omgezet naar WebP formaat, want zo uploadt iedereen bij DG hun foto’s. Daarna heb ik in de backend van mijn magazine de media mappen toegevoegd per pagina, gevuld met alle foto’s. In dezelfde backend heb ik bij ‘Theme options’ ook de gebruikte kleuren en lettertypes toegevoegd. Toen kon ik beginnen met bouwen, dit begint met een algemene pagina aanmaken die het overzicht geeft van alle pagina’s in het magazine. Daarna kon ik alle acht pagina’s toevoegen en een titel geven. Voor deze kleine taak zal ik alleen de eerste drie pagina’s beschrijven.
De eerste pagina was het voorblad, deze bevat vier foto’s en een titel. Achter de titel zit alleen een groene balk die niet over de foto’s heen kan in WPM, daarom heb ik deze balk samen met de foto’s geëxporteerd als 1 afbeelding. Hierdoor hoefde ik alleen nog een titel op de goede plek te zetten. Aangezien je alles toevoegt in columns, hoefde ik er op deze pagina maar één te maken en deze de goede padding te geven.
Op mijn ontwerp had ik tekst onderop de pagina staan, maar tijdens het bouwen zag ik dat dit eigenlijk niet zoveel toegevoegde waarde had. Dit kwam vooral omdat ik tijdens de bouw toch bedacht dat ik het magazine liever ‘Studententijd bij SKC’ noem in plaats van ‘Student van het moment’, dit maakt het meer een mini almanak waarbij de in de inhoudsopgave een losse pagina is. Hier heb ik voor gekozen om de cover en de inhoudsopgave echt los te trekken om het overzichtelijker te maken.
Het ontwerp:
Uiteindelijk gebouwd:
De volgende pagina die ik heb gebouwd was dan ook de inhoudsopgave. In het ontwerp had ik hier ook een moeilijk ontwerp gemaakt om na te bouwen in WPM. Dit zorgde ervoor dat ik het menu deels opnieuw moest vormgeven, terwijl ik het aan het bouwen was. De vormen en foto’s bleven wel hetzelfde, alleen de teksten moesten korter en de plaats ervan moest een beetje aangepast worden zodat het niet meer zou overlappen.
Het ontwerp:
Uiteindelijk gebouwd:
Op de derde pagina wordt de student van het moment voorgesteld, dit ben ik deze editie zelf, aangezien dit magazine gaat over mijn tijd bij SKC studentenvolleybal. Allereerst had ik een vet ontwerp gemaakt met veel lagen over elkaar heen en veel foto’s, maar het bleek al snel dat dit toch te ingewikkeld was (voor nu) om in WPM te bouwen. Daarbij was het ook een druk ontwerp die de focus van de persoon haalde. Daarom heb ik eerst een herontwerp gemaakt voordat ik deze ging bouwen.
Het eerste ontwerp:
Het herontwerp:
Bij het bouwen van het herontwerp in WPM kon de header met titel en achtergrond hetzelfde blijven maar de plaats van mijn leeftijd, team, positie etc moest alsnog verplaatst worden. Deze was namelijk nog steeds best ingewikkeld om in WPM te bouwen. Daarnaast vond ik ook een mooi component die de informatie goed overzichtelijk horizontaal kon weergeven, dat maakte dat ik al helemaal overtuigd was om deze informatie anders weer te geven dan het ontwerp. De lopende tekst en onderaan de foto’s in een slider waren goed na te bouwen en maakte de pagina compleet. Voor deze slider heb ik gekozen aangezien er naar mijn mening weinig beelden meer op de pagina stonden na het herontwerp. Op deze manier wil ik toch meer beelden laten zien, en hier kan de student dan ook persoonlijke beelden bij SKC laten zien.
Uiteindelijk gebouwd:
Deze drie pagina’s heb ik binnen een paar uur kunnen bouwen, ik was er ook heel tevreden over. Gelukkig had ik daarna wel nog vijf pagina’s om WPM nog beter te leren kennen.
Resultaat
Het resultaat waren drie mooie pagina’s van mijn magazine over mijn tijd bij SKC, in een echt WPM magazine die online staat.
Het bijkomend voordeel van het bouwen van een online magazine, was dat mijn collega’s ook het magazine konden bekijken. Het hele magazine heb ik ook gepresenteerd aan mijn collega’s. Omdat het magazine vooral over mijzelf gaat, konden mijn collega’s mij daarbij ook wat beter leren kennen. Het magazine zelf vonden ze ook erg leuk, vooral de leuke foto’s. Ook sommige componenten die ik had gebruikt, hadden ze zelf nog niet zoveel gebruikt en ze vonden het leuk om te zien hoe ik het gebruikt had. De algemene invloed van de bouw is dan ook een positieve invloed geweest. Vooral omdat ik het programma leerde kennen, maar ook omdat mijn collega’s mij beter konden leren kennen.
Reactie
Met een 360 graden feedback moment heb ik aan mijn collega’s gevraagd wat ze van mijn eerste gebouwde magazine vonden.
Mirthe vond het een leuk magazine! Wel gaf ze de tip om de margins gelijk te houden op alle pagina’s en ze liet zien hoe je dat goed instelt met procenten (%) in plaats van pixels (px). Dit heb ik gelijk aangepast en zal ik niet zo snel nog een keer fout doen.
Verder vond ze de pagina’s duidelijk en overzichtelijk, wel zou zij bij de inhoudsopgave iets meer tekst toevoegen om bijvoorbeeld de verschillende hoofdstukken toe te lichten.
Daarnaast had ik met haar eerdere tips ook al de mobiele versie aangepast zodat bijvoorbeeld op de cover de vier foto’s onder elkaar getoond worden in plaats van naast elkaar, dit vond ze nu goed uitgewerkt in de bouw.
Als extra tip zou zij een extra kleur toevoegen om het minder groen-wit te maken. In het algemeen vond ze de bouw goed gegaan en was deze opdracht ervoor om erachter te komen welke ontwerp keuzes wel en niet doorgezet kunnen worden in WPM.
Luc vond het een goed gebouwd magazine, hij miste wel een beetje de extra opvallendheid die wel in het Figma ontwerp zat. Het online magazine was wel duidelijk maar wel meer eentonig ontworpen. Van sommige effecten en ontwerp keuzes die ik in Figma had gemaakt, dacht ik dat dit niet in WPM kon, maar Luc heeft een paar tips gegeven hoe ik dit wel kan toepassen. Dat ga ik zeker meenemen voor de volgende keer.
Transfer
De volgende keer zal ik mijn eerste ontwerp in Figma al beter voorbereiden op de mogelijkheden van WPM. Dit houdt in dat het meer ontworpen moet worden met componenten die horizontaal en verticaal lopen, waarbij overlap wel lastig is. Aangezien ik het programma nu ook beter ken zal het ook makkelijker zijn om in ‘blokken’ te denken.
Ook ga ik de volgende keer wel de leuke en variërende aspecten uit mijn ontwerp toepassen. Dit maakt een magazine al gauw leuker om te lezen. Bijvoorbeeld animaties zijn ook een manier om het levendig te maken, ga ik me er zeker meer in verdiepen.
Als laatste ga ik de volgende keer vaker sparren met collega’s of feedback vragen als ik vastloop. Op deze manier kan ik hun kennis gebruiken en dit combineren met mijn kennis om uiteindelijk ook mijn manier van werken en resultaat te optimaliseren.