Elke opdracht die ik krijg is mij uitgelegd. Als dit een kleine makkelijke opdracht is krijg ik het binnen via Active Collab. Bij grotere opdrachten ben ik vaak met Coen samen gaan zitten om het door te nemen. Hij had dan informatie van de opdrachtgever ontvangen en gaf dit weer door aan mij.
Nadat Coen contact had gehad met de opdrachtgever is hij met mij gaan zitten om mij op de hoogte te stellen over de eisen en verwachtingen. Zo stond er al een website van FormKlub met de benodigde content. Dit wilden ze mooier opgemaakt hebben en laten zien dat het deel van ScoreTrace is. Hiermee hebben wij bedacht hoe we dit zouden doen en teruggekoppeld naar de opdrachtgever.
Voor op de website van Comm.On zelf heb ik de vacaturepagina opnieuw opgemaakt. Ik heb samen met Coen besproken wat hij precies wilde toevoegen en veranderen. Hieruit heb ik voor mij opgemaakt wat er moest gebeuren en uitgelegd hoe ik dit voor mij zag. Hij wilde een overzichtspagina met alle huidige vacatures en bij elke vacature een kleur en beelden toevoegen. Ook hebben we na het maken van het eerste ontwerp nog een keer gezeten om te kijken of er nog aanpassingen nodig waren.
Coen had contact gehad met de opdrachtgever, waarna ik de opdracht kreeg om een brochure te maken voor Rens de Bruijn. Als eerste hebben we samen de opdracht doorgenomen en bepaald wat de eisen en behoeften waren van de opdrachtgever: wat wilde ze en hoe gaan we dit doen? Op basis hiervan heb ik het concept gemaakt, en om deze te bespreken zijn we langsgegaan bij de opdrachtgever.
Meestal gebeurt dit onbewust. Ik ben er altijd wel mee bezig. Een plan van aanpak maken binnen projecten of een overzicht van alle activiteiten die nog moeten gebeuren.
Om een website live- of op een lokale omgeving te zetten zijn een aantal stappen nodig in een bepaalde volgorde. De eerste keer deed ik het nog samen met een van mijn collega’s en noteerde ik wat hiervoor allemaal gedaan moest worden. Op deze manier kon ik de volgende keer deze planning aanhouden en het helemaal zelf doen.
Een planning maken komt eigenlijk ook overal bij kijken. Het is altijd nodig en handig om voor jezelf een overzicht te hebben met wat er voor de opdracht moet gebeuren en hoe je dit gaat doen. Steeds vaker schat ik voor opdrachten in hoe lang ik erover ga doen. Dit wordt ook steeds makkelijker omdat ik vaker opdrachten tegenkom die lijken op die ik al eerder heb gedaan.
Ieder heeft zo zijn eigen manier om een soort planning te maken voor zichzelf. Ik heb een kladblok naast me waar ik vaak alle opdrachten opschrijf zodat ik het naast me heb liggen en ik het ook voor mezelf kan afvinken. Hier schrijf ik ook per project op wat er moet gebeuren.
Af en toe zitten we met Coen en de anderen die meewerken aan opdrachten om te kijken hoever we zijn met alles, wie wat het beste kan oppakken en wat prio heeft. Zo heeft Coen een overzicht van wie waaraan werkt en wij weten welke taken er allemaal liggen en wat eerst moet.
Voor Typeworld moest een poster gemaakt worden met type-tips voor in het klaslokaal. Coen had de opdracht gekregen van de opdrachtgever en in Active Collab kreeg ik de taak met informatie. Ik heb bekeken welke activiteiten er allemaal nodig waren en op basis hiervan een planning ‘Estimated time’ in Active Collab, gemaakt.
Meerdere keren heb ik met aangeleverde of verzamelde informatie concepten moeten maken. Soms gebeurde dit ook onbewust. In dat geval was het concept bijna al vanzelfsprekend. Bij het presenteren van het ontwerp lichtte ik dan de gemaakte keuzes toe.
De opdrachtgever had een aantal ideeën met de content aangeleverd. Hierna heb ik een onderzoekje gedaan naar Typeworld. Ze bieden typelessen aan voor kinderen op de basisschool. De doelgroep was dus kinderen, daarom moest de poster leuk zijn en de aandacht trekken, maar ook informatie bevatten. De teksten die erop kwamen moesten dus kort, makkelijk en snel leesbaar zijn. Vanuit de huisstijl van Typeworld heb ik de kleuren en fonts gebruikt. Ook was mijn idee om iets met het beeldmerk uit het Typeworld logo te doen.
Kopteksten (Roboto Slab)
Lopende teksten (Proxima Nova)
Kopteksten (Raleway)
Lopende teksten (Open Sans)
De brochure van Rens de Bruijn heb ik in mijn vorige verslag wel laten zien maar het concept nog niet uitgelegd. Ik heb namelijk op basis van de huisstijl, de kleuren en fonts van Rens de Bruijn een concept gemaakt. Rens de Bruijn is een Volvo dealer. In de brochure moesten drie categorieën met Volvo machines en info hierover komen. Omdat ze de brochure wilden uitdelen bij een event was de doelgroep ook bepaald. De doelgroep was bedrijven die de machines wilden kopen voor eigen gebruik. Op basis van alle informatie heb ik een conceptontwerp kunnen maken, dat na een gesprek met de opdrachtgever nog wat aangepast is.
Voor MB Zonnepanelen heb ik samen met Coen een concept opgezet voor een campagne. De campagne was voor de zoektocht naar zonnepanelen monteurs. Wij wilde dat het aandacht zou trekken en dus niet zomaar weer een vacature zou zijn. Omdat je zonnepanelen vaak op daken moet plaatsen bedachten we de quote: ‘Wij zoeken monteurs zonder hoogtevrees’. Ook wat betreft beeld hadden we hier meteen ideeën bij. Hiervan hebben we een concept gemaakt en dat laten zien aan de opdrachtgever. Later heb ik hier ook animaties voor billboards langs de weg, banners en posters voor gemaakt.
Voor de vacaturepagina van Comm.On heb ik op basis van het gesprek met Coen een conceptschets gemaakt, waarin alle delen van een huidige vacature stonden en hoe ik deze in gedachten had. Hij had hier nog wat feedback op. Na dat verwerkt te hebben ben ik op basis van de schets gaan bouwen.
Een ontwerp wordt altijd gebaseerd op een schets of een bestaande huisstijl. Deze periode heb ik ontwerpen samen met collega’s gemaakt, bijgewerkt en hele nieuwe gemaakt.
Omdat ik voor Rens de Bruijn ook een brochure had gemaakt mocht ik ook het ontwerp van de nieuwe website maken. Hierbij heb ik delen van het concept van de brochure overgenomen voor de stijl.
Nadat het concept was bedacht heb ik op basis daarvan een ontwerp kunnen maken. Bij de aangeleverde content zat de afbeelding die ze voor de poster wilden gebruiken en alle type-tips die erop moesten komen. Ik heb gekozen uit het idee dat het best bij de aangeleverde content paste; het idee van tekstwolkjes. Ik had eerst een snelle opzet gemaakt van verschillende ontwerpen. Hierna ging ik weer terugkijken naar het concept en welk ontwerp daar het beste bij aansloot.
De gekleurde tekstwolkjes vond ik het meest aansluiten. Interessant en speels maar toch met duidelijke informatie. Ook het beeldmerk dat bij elke tip terugkwam moest iets aangepast worden. Zo zweeft het poppetje bij het eindontwerp niet is het minder het beeldmerk uit het logo en meer interactie doordat het telkens in de richting, de typer, kijkt.
Dit was een spoedklusje. Een ander bedrijf waar Coen vroeger stage had gelopen kwam met de vraag of wij snel grafieken in Illustrator op konden maken. Wij hadden content aangeleverd gekregen en ik ben toen alle grafieken op gaan maken en stylen op basis van hun concept dat wij ook hadden ontvangen.
Voor Sportfotogaaf had Coen als een opzetje voor een logo gemaakt. Hij vroeg mij of ik hiernaar zou willen kijken en nog wat aan te passen had. Aan dat ontwerp had ik wat kleine aanpassingen gedaan. Hierna hadden we het voorgesteld maar het bleek dat de opdrachtgever een abstracter logo wilde hebben. Ik ben dus nieuwe schetsen gaan maken en omdat de kleur ook nog niet goed was heb ik een nieuw ontwerp gemaakt in twee kleuren. Hieruit kwam uiteindelijk het gekozen logo.
Ik heb meerdere dingen ontworpen voor Finncolors. Eerder had ik al de folders van verschillende verven waar nu ook nog de folder van Shed Black bij kwam. De folder heeft een ander formaat en is qua content uitgebreider dan de eerdere. Er was al een opzet van de folder die ik heb doorgezet met dezelfde stijl als de eerder gemaakte folders.
Voor de verven moest er nieuwe content op de huidige etiketten komen. Omdat de nieuwe content zoveel meer was dan wat het eerst was, moest ik een beetje puzzelen om alles erop te krijgen. Ik heb ervoor gekozen om de afbeelding kleiner te maken en de tekst in kleinere kolommen te zetten om het leesbaar te houden. Het werd helemaal een uitdaging toen we erachter kwamen dat de waarschuwingstekens een bepaald formaat moesten zijn. Hierdoor moesten deze namelijk allemaal een stuk groter erop komen volgens regels. Maar uiteindelijk zijn alle etiketten gelukt en er mooi uitgekomen. Deze etiketten heb ik ook nog in een mockup van het soort verfblikken gezet die bij Finncolors worden gebruikt. De mockups konden zo gebruikt worden voor in de brochure van Finncolors.
Het presenteren gebeurt vooral intern. Als ik een ontwerp gemaakt heb laat deze aan Coen zien en onderbouw hierbij bepaalde keuzes die ik heb gemaakt. Hiermee kon hij mij dan feedback geven en aangeven wat hij anders zou doen.
Intern heb ik de ontwerpen voor de website van Rens de Bruijn aan Coen gepresenteerd. Ik had aangegeven dat het ontwerp dezelfde stijl als de brochure had gekregen en waar en hoe ik dit had toegepast. Met mijn toelichting kon hij weer feedback geven om zo tot het beste eindresultaat te komen.
Na het de schets en de eerste opzet heb ik het gepresenteerd aan Coen. Hierin lichtte ik mijn keuzes toe en onderbouwde ik waarom ik voor bepaalde dingen was gegaan. Hierdoor zijn we samen tot een mooie vacaturepagina gekomen.
Voor de poster van Typeworld heb ik na het maken van een concept, bij de eerste ontwerpen en bij het eindontwerp samen met Coen gezeten. We hebben toen de opdracht doorgenomen en ik heb toegelicht wat en waarom ik bepaalde keuzes had gemaakt.
Van Van der Zwan Advocaten kwam ook de opdrachtgever langs. Hierbij hebben we ook weer de site laten zien en heb ik uitgelegd hoe hij zelf aanpassingen kan maken.
Johan Hardeman is een freelance journalist. Ik heb op basis van de template van Comm.On een website voor hem gebouwd. Nadat de site helemaal gevuld was kwam Johan zelf langs om het een en ander door te nemen. Ook heb ik toen de site aan hem laten zien en uitgelegd hoe de site werkt en hoe hij zelf dingen kan aanpassen.
Voor elke opdracht en bij elk project moest ik wel bestanden voorbereiden of nalopen. Bijvoorbeeld afbeeldingen nalopen op geschiktheid voor druk of webgebruik. Ook is het zaak om bij een website alle bestanden goed te ordenen, zodat alles goed werkt en linkt. Voor websites hebben wij hiervoor een beginopzet die je dan kunt kopiëren. In deze basisopzet zijn dingen als Bootstrap, Fontawesome en Sass dan al gelinkt.
Omdat ik voor Finncolors verschillend drukwerk heb moeten ontwerpen was het nodig om hiervoor alle afbeelding te verzamelen. Alles moest natuurlijk geschikt zijn voor drukwerk. Dit betekent dat het qua kwaliteit en formaat bepaalde waardes moest hebben om scherpe afbeeldingen op het gedrukte werk te krijgen.
Ook moest ik er bij het maken van bestanden op letten dat, als het gedrukt moest worden, het in Indesign een afloop van 3mm moest hebben. Alle vlakken met kleuren of afbeeldingen moesten dan buiten het drukvlak tot aan de afloop lopen zodat het goed zou gaan met afdrukken.
Voor de brochure moest ik eerst de mockup maken en deze omzetten naar een jpg met de goede grootte en kwaliteit om het in de brochure te kunnen gebruiken.
Voor de vacature die geplaatst moest worden was al een beeld gemaakt voor op social media. Op basis hiervan heb ik een banner voor op de vacature-overzicht pagina en voor op de detailpagina van de vacature gemaakt. Dit heb ik ook voor een andere vacature gedaan. Zo krijgt elke vacature een eigen kleur met andere iconen en zijn ze dus allemaal verschillend.
Met dit werkproces ben ik deze periode veel aan de slag geweest. Ik heb meerdere media-uitingen zelfstandig kunnen maken. In HTML en deze weer in Wordpress gezet.
Hiervoor heb ik de verantwoording gekregen voor de volledige bouw van de website. Van HTML naar Wordpress.
Bij het ontwerp liep ik alleen tegen iets aan in de footer. In het ontwerp stond een blauwe golf waar de footer begon. Eerst wist ik niet goed wat ik moest doen, maar na goed nadenken en wat testen heb ik het opgelost door een svg boven de footer te plaatsen Svg is namelijk responsive en blijft dus op elk scherm van goede kwaliteit.
De ontwerpen stonden al in Photoshop en deze moest ik gaan vertalen naar HTML. Ik heb dit gedaan zoals wij dat hier bij elke maatwerk website doen, met behulp van Bootstrap en Sass. Ik ben begonnen met het bouwen van de header. Deze was redelijk makkelijk omdat hij bijna hetzelfde was als bij eerdere websites. Zo kon ik af en toe spieken bij andere websites of het één en ander overnemen.
Hierna ben ik verder gegaan met de content en de footer. Als ik dan de homepagina had staan waren de andere pagina’s niet heel moeilijk meer. De header en footer blijven hetzelfde en in de content kwamen hier en daar elementen terug uit de homepagina. Het enige waar ik dacht tegenaan te lopen was de footer, aangezien hier in het ontwerp een golf in stond. Maar dit heb ik opgelost door een svg boven de footer te plaatsen. Svg is namelijk responsive en blijft dus op elk scherm scherp.
Toen de HTML stond moest dit in een Wordpress jasje gehesen worden. Aangezien ik dit nog niet eerder had gedaan heeft Vincent mij hier mee geholpen. Hij heeft eerst iets vóór gedaan, toen iets samen en uiteindelijk heb ik een deel alleen in Wordpress kunnen zetten.
Dit ben ik in Wordpress verder op gaan bouwen en custom invulbaar gaan maken. Met behulp van Advanced Custom Fields heb ik het zo gemaakt dan je bepaalde delen van de website zelf in kunt vullen of aanpassen.
Op de blog-overzicht pagina liep ik tegen problemen aan. Bij elk blogbericht stonden de categorieën die eraan gehangen waren en als je hierop klikte moesten alleen berichten met die categorie zichtbaar worden. Zoiets had ik nog nooit eerder gedaan. Ik heb op internet wat informatie hierover gezocht en dit daarna zelf opgelost. Maar daarbij kwam weer een ander probleem kijken. Ik had namelijk eerder al voor op de blog-overzicht pagina de pagination samen met Vincent gefixt omdat mij dit niet zelf lukte. Maar nu werkte deze pagination wel op de blog-overzicht maar niet als je op een categorie klikte.
Dit heb ik opgelost, met behulp van internet, door voor het blog-overzicht een nieuwe wp_query te maken en deze hier en na de categoriepagina af te sluiten met reset_postdata.
Limesrun is een website op basis van de template van Comm.On. Hiebij hoefde ik dus alleen maar alles in te vullen en op een aantal plekken maar kleine aanpassingen te doen.
Voor Infozuil was al een website opgebouwd voor LED-schermen. Deze site was weer net iets anders. De header en footer kon ik overnemen maar de inhoud moest opnieuw opgebouwd worden. Met de ontwerpen kon ik het meteen opbouwen in Wordpress. De meeste delen van de content kon ik overnemen van LED-schermen en op deze site aanpassen.
Ook waren er kleine drempels, zo waren er in het ontwerp twee dezelfde blokken op verschillende pagina’s die op de één een oranje achtergrond had en bij de ander een witte achtergrond. Hierdoor heb ik een aanpassing moeten doen waarbij ze zelf de achtergrondkleur van elk blok kunnen kiezen en welke kleur de tekst dan moet krijgen. Dit kostte best veel tijd maar het is me uiteindelijk wel gelukt.
De vacaturepagina is opgebouwd met behulp van Bootstrap 3. Dit was eerst even wennen aangezien elk ander project binnen Comm.On in Bootstrap 4 wordt opgebouwd. Gelukkig verschilt het niet al te veel en lijkt het er wel op. Ik heb hier ook weer gewerkt met een Wordpress archive page en een single page.
Deze periode heb ik een aantal keer te maken gehad met dingen live zetten. Of dit nou op een lokale of online server was. Hiervoor moest ik procedures langs lopen en een stappenplan afgaan om alles smooth te laten verlopen. Ik heb hiervan dan ook lijstjes voor mijzelf gemaakt met stappen erop.
Dit is een website op basis van de template van Comm.On. Deze heb ik ook opgebouwd in een testomgeving. Toen hij bijna af was heb ik hem eerst nog een keer helemaal nagelopen en getest op responsiveness en verschillende browsers. Hierna heb ik de website met behulp van mijn stappenplan online gezet. Hiervoor heb ik daarna ook meteen SSL geactiveerd.
Hiervoor heb ik eerst een lokale omgeving opgezet zodat ik dingen kon aanpassen zonder dat het meteen online stond. Toen de aanpassingen goedgekeurd waren heb ik de lokale omgeving overgezet naar de live omgeving.
Dit gebeurt altijd bij elk project en overal binnen Comm.On. Zo sla je elk project op onder een bepaalde naam op de server en bij het coderen van Sass moet je het op een bepaalde manier structureren. Hier heb ik bijna elke dag wel mee te maken gehad.
Bij hele nieuwe projecten en opdrachten waarbij we veel moeten aanpassen aan een site maken we altijd een repository in SourceTree. Dit doen we zodat we met meerdere mensen tegelijk aan het project kunnen werken. Wanneer ik of een collega aanpassingen maak aan een website, pushen we deze in SourceTree zodat andere collega’s de aanpassingen ook binnen kunnen halen. Iedereen heeft zo de meest up to date bestanden van het project.
Op de server bewaren we alles per project in een eigen map. Een nieuw project krijgt dan een nummer met het jaartal en het nummer van het hoeveelste project van dit jaar het is. Alles dat onder dit project wordt opgeslagen krijgt dezelfde nummers met daarna een naam van wat het inhoudt.
Ook zetten we achter de naam van het bestand ‘_HR’ als het gaat om drukwerk. Dit betekent dat dit het High Resolution bestand is dat is nagelopen en klaar is om gedrukt te worden. Oude bestanden of bestanden waarvan we veel hebben aangepast en waar we meerdere versies van hebben zetten we onder een mapje _oud om het toch achter de hand te houden.
