Adsventures

Nick Swaerdens-28-10-2015-4IV2

Download PDF

Inleiding

Ik zit nu in het vierde jaar van de opleiding interactieve vormgeving op het Grafisch Lyceum Utrecht. In de 2e helft van het 3e jaar wordt er een stage bedrijf voor ons gezocht door het BBC. Nadat het BBC een stage bedrijf heeft gevonden zijn we verplicht om bij het aangewezen bedrijf te solliciteren. Na een stage van 5 maanden bij Zeo te hebben gelopen besloot ik om mijn andere 5 maanden stage bij een ander bedrijf te doen.

Dit verslag gaat over mijn eerste stage periode bij Adsventures. Hier loop ik stage over de periode van 31 augustus t/m 29 januari. In dit verslag ga ik het hebben over de werkzaamheden die ik heb verricht, wat ik heb geleerd en wat ik beter had kunnen doen. Omdat ik nu stage loop bij een nieuw bedrijf zal er ook een kort stukje over het bedrijf in het verslag komen.

Tijdens mijn stage bij Adsventures ben ik van plan om beter te worden in de ontwikkeling van concepten. Daarnaast wil ik beter leren vormgeven en programmeren. Voor de vormgeving wil ik vooral Material design van Google leren gebruiken. Voor het programmeren ga ik me verder verdiepen in talen zoals jQuery. Een ander doel is om zelfstandig unieke websites te kunnen vormgeven en bouwen met Wordpress.

Deze doelen zal ik behalen door vooral veel onderzoek te doen en veel uit te proberen.

Mijn vorige twee stageverslagen kunnen hier en hier worden bekeken.

Over de website

Dit keer heb ik vooral gekeken naar realistische uitdagingen die ik zelf aankon zonder al teveel hulp van andere bronnen. Zo wilde ik dat de navigatie reageerde op de achtergrond van de sectie waar de gebruiken zich in bevind (de navigatie wordt wit op een donkere achtergrond en donker op een witte achtergrond). Daarnaast heb ik me verdiept in CSS3 animaties en wilde deze zoveel mogelijk in de website verwerken. De animaties die ik in de website verwerkt heb zijn subtiel en duren niet langer dan 0.3 seconden zodat de gebruiker niet gek word van alle animaties. Ik heb ook weer een nieuwe webtechniek toegepast, deze webtechniek heet flexbox. Flexbox bestaat al een tijdje maar heeft veel problemen gehad met browser support, dit was ook de reden waarom het zo weinig gebruikt werd. Nu begint flexbox weer een stuk populairder te worden omdat browsers flexbox nu beginnen te ondersteunen.

Tijdens het vormgeven van de website heb ik vooral gelet op gebruikersvriendelijkheid. Met de feedback van het eerste stageverslag in het achterhoofd heb ik een soortgelijke website vormgegeven. De kleuren die ik heb gebruikt zijn donkerblauw met wit en een vel roze kleur als accent. Het lettertype dat gebruikt is in de website is RobotoSlab van Google. Ik heb dit lettertype gebruikt omdat het erg goed te lezen is en het een mooi neutraal lettertype is.

De ontwikkeling van de website ging vrij snel. Ik ben tegen één probleem opgelopen waar ik moeite mee had om op te lossen. De rest had ik vrij snel opgelost. De grootste uitdaging van deze website was de functionaliteit van de jQuery. Doordat ik tijdens het maken van mijn tweede stageverslag veel in aanraking kwam met jQuery ben ik het steeds meer gaan gebruiken voor verschillende websites. Hierdoor heb ik een groot deel van de jQuery zelf kunnen programmeren. Het probleem waar ik tegenaan liep was een bug in webkit browsers. Steeds als de sliders van werkzaamheden naar de volgende slide gingen kregen sommige knoppen een andere tekst dikte en schoten daarna weer terug naar de normale dikte. Dit heb ik uiteindelijk opgelost met een kleine omweg.

DeDe website is volledig responsive. Als de browser breedte onder de 850px komt zal flexbox de blokken van "werkzaamheden" onder elkaar zetten en ervoor zorgen dat bij alle blokken de tekst boven het plaatje komt.

De website krijgt ook een normale navigatie balk aan de bovenkant als de breedte van de browser 460px of kleiner is. De navigatie stopt ook met het reageren om de achtergrond kleuren van de secties waar de gebruiker zich in bevind.

Alle knoppen op de website krijgen een groter klik gebied zodat mobiele gebruikers niet hoeven te mikken om op een knop te drukken. Daarnaast zal er meer ruimte zitten tussen knoppen waar dit nodig is om te voorkomen dat gebruikers op de verkeerde knop drukken.

De website werkt niet op ie9 omdat deze flexbox niet ondersteund. Aangezien ie9 steeds minder gebruikt wordt vond ik het niet nodig om hier een fall-back voor te maken.

Adsventures

Adsventures Internet Media BV is gespecialiseerd in online affiliatie marketing. Dit doen zij onder andere door gebruik te maken van de mogelijkheden van Google, namelijk jezelf vindbaar maken. Alles wat wij doen heeft één doel: nieuwe klanten werven voor hun partners. Die nieuwe klanten noemen ze ‘leads’.

Om zoveel mogelijk leads te kunnen genereren hebben zij een portfolio van tientallen websites en applicaties opgebouwd. Dit leidt tot meer dan 1 miljoen pageviews per jaar. Consumenten op zoek naar financiële producten zoals online beleggen, verzekeringen of kredieten kunnen via Google op een van hun websites komen of een applicaties hierover vinden. Zo worden de gebruikers van hun portfolio een klant voor de partner en dus een lead.

Adsventures heeft zich gespecialiseerd in het genereren van leads voor internationale financiële organisaties. Hierbij kunt u denken aan bedrijven die diensten aanbieden zoals online kredieten en online beleggen. Hun cultuur kenmerkt zich als innovatief, ondernemend en altijd op zoek naar nieuwe kansen. Ze zijn vaak de eersten met hun unieke concepten en staan meestal in de top 3 van de zoekresultaten (zowel websites als applicaties).

Easywebsite

EasyWebsite is gevestigd in Utrecht en onderdeel van AdsVentures Internet Media BV (opgericht in 2011). Hun missie is om elke MKB’er te voorzien van een betaalbare, mooie website met een uitstekende service.

Werkzaamheden

De werkzaamheden die ik vooral bij Adsventures uitvoer zijn het ontwikkelen van "easywebsites", het vormgeven van App icons, App splash screen en logos. Easywebsites zijn websites die ontwikkeld zijn met het Avada thema in Wordpress. Het voordeel van dit thema is de snelheid waarmee een website in elkaar kan worden gezet. Omdat Adsventures goedkoop website maakt moeten deze websites snel in elkaar gezet worden. Het Avada thema maakt het mogelijk om twee website promo’s in één dag af te krijgen (een prototype is een voorbeeld voor de klant zodat de klant feedback kan geven. De prototype bestaat uit een front-page, een willekeurige pagina en de contact pagina).

Het nadeel van dit thema is dat er minder controle is over de lay-out van de website en dat de website trager werkt door alle scripts en onnodige HTML, CSS regels die Avada toevoeg.

HP-studio

Hp-studio is een fotostudio die veel verschillende soorten foto's maakt. Zo doen zij bijvoorbeeld modellenfotografie, productfotografie, bedrijfsprofiel, dieren, familieportretten, zwangerschapshoots, partyshoots. Ze wilde graag een nieuwe website voor hun fotostudio.

Deze opdracht heeft mijn vaardigheden met het Avada thema verbeterd. Ook ben ik beter geworden in het vormgeven van een website en in het toepassen van CSS3 technieken in de Wordpress websites van klanten.

Voor deze website was een dag ingepland maar omdat het een van mijn eerste en een vrij unieke website was heb ik er een aantal dagen over gedaan om het helemaal uit te vogelen en functioneel te krijgen.
Naar de website

Tech2

Tech2 is een bedrijf dat zich specialiseert in het verhelpen van de meest voorkomende multimedia problemen. Zo helpen ze bijvoorbeeld bij het installeren van televisiezenders, het aanleggen van kabels, het ophangen van televisies, trage computers, het beveiligen van computers en wifi problemen.

Tech2 wilden graag een logo en website voor hun bedrijf maar hadden nog niet echt een huisstijl. Ik had dus veel vrijheid in het design van de website.

Deze opdracht heeft mijn vaardigheden met het Avada thema verbeterd. Daarnaast ben ik beter geworden in het ontwikkelen van een huisstijl en het vormgeven van logos en websites.

Voor deze website had ik een dag ingepland, dit heeft uiteindelijk iets langer geduurd omdat ik later te horen kreeg dat ik het logo voor de website moest vormgeven.

* Het kan zijn dat de website nog op de test-server staat. De link naar de test-server staat in de bijlagen sectie.
Naar de website

RiMo Financials

RiMo Financials is een Zzp-er \ klein administratiekantoor. Werkzaam in de financiële dienstverlening. Ze wilden een website met een zakelijke professionele uistraling.

Voor deze website was een dag ingepland maar omdat het een van mijn eerste en een vrij unieke website was heb ik er een aantal dagen over gedaan om het helemaal uit te vogelen en functioneel te krijgen.

Deze website heeft mij een aantal nieuwe functies van het Avada thema geleerd.

Voor deze website was een dag ingepland maar omdat de website zo klein was heb ik er minder lang over gedaan.
Naar de website

G.R.C. Isolatie

G.R.C. Isolatie is een isolatie bedrijf die werkzaamheden aan de dak spouwmuur, vloeren en bodemisolatie uitvoeren. Ze wilde een professionele website die bij hun logo paste.

Deze website heeft me meerdere technieken binnen het Avada thema geleerd. Daarnaast heb ik ook kleine omwegen geleerd om verschillende lay-outs te maken.

Voor deze website was 6 uur ingepland, hier heb ik uiteindelijk een halve dag aan gezeten omdat ik geen hulp heb kunnen vragen aan de begeleider. Hierdoor moest ik een groot deel zelf uitzoeken dat tijd kostten.

* Het kan zijn dat de website nog op de test-server staat. De link naar de test-server staat in de bijlagen sectie.
Naar de website

Applicaties

Ik heb voor meerdere applicaties de kleuren aangepast, iconen en splash screens gemaakt. Dit moest snel gebeuren want Adsventures wilden zoveel mogelijk applicaties over beleggen produceren in een korte tijd.

Vaak deed ik vrij lang over het design van de iconen omdat we 2 onderwerpen moesten combineren in het icoon. Alle applicaties hadden als basis onderwerp beleggen zoals; Beleggen voor dummies, Beleggen in goud, BeursNiews etc. Hierdoor was het erg lastig om steeds wat nieuws te vinden dat niet teveel om de andere iconen leek.

Zelfkennis

Tijdens mijn eerste stageperiode bij Adsventures heb ik vrij weinig tijd gehad om zelf kennis op te doen zoals ik bij Zeo deed. Hierdoor had ik besloten om af en toe in mijn vrije tijd onderzoek te doen naar nieuwe webtechnieken en handige talen om te leren.

Uiteindelijk heb ik besloten om verder te gaan met jQuery omdat dit ontzettend handig is voor het interactief en levendiger maken van websites. Daarnaast wilde ik een nieuwe taal leren die mij zoveel mogelijk vrijheid bood in wat ik wilden doen. Zo ben ik begonnen met een Youtube cursus over C++. Veel grote websites hebben C++ in hun backend. De reden waarom ze C++ hebben i.p.v. talen zoals PHP is omdat C++ veel sneller is. Dit verschil is niet te merken op kleine websites maar wel op grote websites die veel bezocht worden. Ik ben C++ gaan leren om een nieuwe taal te kunnen herkennen en mezelf te onderscheiden van andere interactief vormgevers.

Naast het programmeren wilde ik mijn vormgeving vaardigheden verbeteren. Dit heb ik gedaan d.m.v. de Google Material design documentatie door te nemen. Deze documentatie staat vol met design tips over hoe je de gebruiksvriendelijkheid kan verbeteren, hoe je goede combinaties maakt van kleuren, hoe je animaties het best kunt gebruiken etc.

Zelfreflectie

Voor mijn eerste periode bij Adsventures heb ik de volgende doelen gesteld:

Concept:

Het bedenken van een concept vind ik altijd belangrijk maar ook lastig. Daarom is dit nog steeds een doel dat ik wil verbeteren in deze periode. Dit verbeterd vanzelf met elke opdracht die ik begin.

Design:

Omdat design zo belangrijk is wil ik dit doel altijd blijven verbeteren. Mijn doel met design is om professionele en unieke designs te kunnen maken die een goede gebruiksvriendelijkheid hebben. Design ga ik verbeteren door veel te designen en documentaires te lezen zoals Google Material design die veel handige tips bevatten.

jQuery:

Ik heb jQuery ook weer als doel gesteld. Ik heb dit weer als doel gesteld omdat jQuery het makkelijker maakt om animaties toe te passen op elementen. Zo kan je bijvoorbeeld een class toevoegen als de gebruikers ergens op drukt. De toegevoegde class veranderd dan de vorm van een element. Dan moet je alleen nog maar een CSS3 animatie op het element zelf zetten en het element is geanimeerd.

Nu ik de basis onder de knie heb wil ik me verdiepen in de geavanceerde delen van jQuery. Dit doel ga ik bereiken door er veel mee te werken en online handleidingen op te zoeken.

C++

Ik heb C++ als optioneel doel gesteld. Dit wil ik gaan leren als ik even wat anders wil leren dan design of jquery. De reden waarom ik C++ wil gaan leren is omdat het veel meer vrijheid biedt dan welke taal dan ook. Dit ga ik leren door online documentaires en tutorials te volgen en vooral zelf veel uitproberen.

Ik ben tevreden over mijn eerste stageperiode bij Adsventures. Ik leer wat minder op het gebied van programmeren maar veel meer op het gebied van design. Aangezien ik HTML en CSS al onder de knie heb en jQuery ook steeds beter gaat vind ik het fijn om veel met design bezig te zijn.

Wat ik volgende keer beter kan doen is het bedenken van een concept. Ik ben vaak lang bezig met het bedenken van een concept waardoor ik uiteindelijk te weinig tijd overhoudt om de website op tijd af te krijgen. Dit gaat wel steeds beter met elke opdracht die ik krijg.

Opmerking praktijkopleider

Nick is iemand die perfectionistisch in elkaar zit, dit is ook terug te zien in zijn werk. Zoals hij bij HP Studio heeft laten zien, de subtiele animaties en uitlijning van de website komt goed tot zijn recht hierdoor. Verder is Nick een jongen die graag aan het werk gezet wilt worden. Qua design/ontwerp is Nick wat minder sterk en geeft hij ook aan hier een stuk langer mee bezig te moeten zijn.

Een leerpunt voor Nick is wel dat hij zich wat socialer mag opzetten tegenover zijn mede stagiaires en collega’s en ook wanneer Nick ergens niet uitkomt, mag hij eerst zelf iets meer tijd steken in het uitzoeken voordat hij het vraagt want ik weet zeker dat wanneer hij er iets meer tijd in steekt hier zelf de juiste oplossing voor weet te vinden zoals ik al een paar keer heb gemerkt.

We zijn verder tevreden met Nick in ons team aangezien hij steeds sneller wordt in het maken van een website.

Bijlagen

De onderstaande links verwijzen naar projecten waar ik aan gewerkt heb. De websites die nog op de test-server staan kunnen zijn verplaatst naar het domein van de klant. Daarom hebben deze links een pop-up met een link die naar het domein van de klant verwijst en een link die naar de test-server verwijst.

Easywebsites

App icon & splash

Overig

Bronvermelding

De volgende bronnen heb ik gebruikt om deze website te maken:

Waypoints is gebruikt om het menu van kleur te laten veranderen afhankelijk van de sectie waar de gebruiker in zit. Daarnaast wordt waypoints ook gebruikt om de blokken van werkzaamheden omhoog te laten komen als de gebruiker tot een bepaald punt scrolt.

Flickity is gebruikt om de sliders te maken in werkzaamheden. De reden waarom ik voor flickity heb gekozen is omdat flickity lightweight en responsive is, daarnaast werkt het ook goed op touch apparaten.

Smooth scroll is gebruikt om de scroll naar bepaalde secties te animeren. Deze plug-in zorgt er ook voor dat de adresbalk niet veranderd.

RobotoDraft is het gebruikte font op de website. Dit font is ontwikkeld door Google.

Stack overflow is gebruikt om problemen op te lossen. Stack overflow is een website waar programmeurs bij elkaar komen om elkaar te helpen d.m.v. vragen te stellen waar programmeurs met de oplossing op kunnen antwoorden. Degene die de vraag stelde kan het beste antwoord kiezen waarna deze bovenaan komt te staan.

Flex-box is de gebruikte techniek om de lay-out van werkzaamheden sectie te maken.