BLOG 2 - PSAttent.nl

Programma's: Adobe XD, Zeplin

Duur opdracht: 12 uur

Het is vandaag woensdag 30 oktober, wat betekent dat ik hier nu al bijna acht weken stage loop. Tot nu toe is het een groot avontuur. Ik begon bij Create, ging over naar Specialist in websites, waarna ik nu weer terug ben bij Create voor Team TalentZ. TalentZ is een langdurig project waar ik mij deze stage op mag focussen. Omdat het project nog niet klaar is vind ik het persoonlijk minder leuk om nu al te vertellen. Dus ik heb besloten TalentZ te bewaren voor een later blog.

Nu heb ik gelukkig genoeg te vertellen dus ik begin vandaag wel over een website die ik mocht ontwerpen. De website was voor PSAttent.

Sinds 2006 zijn zij actief met preventief medisch onderzoek en medische keuringen. Ze richten zich voornamelijk op de top 3 oorzaken van langdurige ziekte van werknemers: PSA (Psychosociale arbeidsbelasting), leefstijlziekten en lichamelijke klachten. De website was niet up-to-date meer en bevatte onnodige elementen. Na alle uitleg van Tom gehad te hebben ging ik aan de slag:

---

B1-K1-W1 “Bespreekt de opdracht”

De opdracht was doorgevoerd naar Tom en hij heeft dus ook met de klant gezeten. Daar was ik helaas niet bij. Waarom ik helaas zeg? Omdat ik denk dat ik veel had kunnen leren van een klanten gesprek. Het is niet anders.

Nadat ik de opdracht van Tom heb gehad, schreef ik alles nog eens voor mezelf op om overzicht te krijgen van wat er moest gebeuren.

B1-K1-W2 “Maakt een planning”

Ondanks dat er automatisch een uren-planning klaar staat voor een opdracht maakte ik voor mezelf wel een dagplanning om mezelf een deadline te geven voor iedere pagina. Ik had 12 uur gekregen om de gehele website te ontwerpen en met een beetje trost kan ik zeggen dat ik de deadline gehaald had.

Hieronder de foto’s van mijn notities over de opdracht en planning.

B1-K1-W3 “Oriënteert zich op opdrachtgever/doelgroep/onderwerp”

Na alles zogezegd “gesorteerd” te hebben, ging ik onderzoek doen naar de doelgroep en mogelijke concurrenten. Gebaseerd op wat ik gelezen had op hun huidige website over hun doelgroep besloot ik de website relatief eenvoudig te houden. Mensen die naar PSAttent.nl gaan zijn vooral op zoek naar meer informatie of contactgegevens. Daarbij is het een bedrijf gericht op PSA (Psychosociale arbeidsbelasting) wat onder het kopje zorg valt.

Met die informatie ging ik op zoek naar websites en bedrijven die ook onder dat kopje vallen en kwam er over uit dat PSAttent vooral in een nieuw en modern jasje gestoken mocht worden. Onderzoek doen naar een onderwerp wordt gemakkelijker zodra je de concurrenten gezien hebt. Je krijgt een beter beeld van de sector en kan daardoor sneller en/of beter iets bedenken wat bij de sector past.

Hieronder een foto van de oude website en een website van een concurrent:

Kijkend naar IPvB merkte ik gelijk al een verschil. IPvB ziet er een stuk nieuwer uit door de frisse kleuren en lettertypes. De schaduwen bij de afbeeldingen en de afgesneden vorm. zorgen voor meer dimensie waardoor het interessanter wordt om naar te kijken.

B1-K1-W5 “Maakt een ontwerp”

Met alle informatie die ik verzameld had ben ik aan de slag gegaan. Het

eerste wat ik deed was het logo opslaan en de kleuren toevoegen aan mijn stijlbord. Het makkelijke aan Adobe XD is het ingebouwde stijlbord. Je kan kleuren, fonts en afbeeldingen toevoegen en zodra je een bepaalde kleur nodig hebt, hoef je er alleen op te klikken.

Wat ik vooral belangrijk vond was dat de website eenvoud en samenhang uit moest stralen. De huidige website bestond niet uit enorm veel informatie dus ik heb alle informatie duidelijk verdeeld en/of samengebracht. Dat heb ik gedaan door scannend te lezen en overeenkomsten te zoeken tussen de verschillende teksten. Als het beide over hetzelfde of soortgelijke onderwerpen viel, bracht ik ze samen. Als dat niet het geval was, hielt ik ze bij elkaar vandaan.

Op de home pagina was mijn doel om de bezoeker gelijk een goed beeld te geven van PSAttent. Dat heb ik gedaan door Ruud Braams (algemeen directeur) en Jurriaan Blekemolen (bedrijfsarts en A&O deskundige) gelijk op de home pagina neer te zetten in combinatie met hun partners.

Op alle andere pagina’s was het een kwestie van informatie overbrengen.

Uiteindelijk heb ik alles ingepakt met een kleuroverlay op de foto’s om alles nog een beetje dichter bij elkaar te brengen (in het gebied van styling). Een kleuroverlay houdt eigenlijk in dat je een kleur pakt die je over de foto plaats, en de dekking lager zet waardoor de foto op een andere manier kleurijk wordt.

Hieronder drie ontworpen pagina's en een link naar het complete ontwerp.

Prototype link:

https://xd.adobe.com/view/a04a0d18-0583-4022-6010-f8e1d1226c8c-d67b/

B1-K2-W1 “Bereidt de realisatie voor”

Ik was stomverbaasd toen ik hoorde dat het design was goedgekeurd en door mocht gaan naar de realisatie. Daarvoor heb ik mijn ontwerp in Zeplin gezet. Een programma om online websites te delen en te bekijken. Het is voornamelijk handig voor developers omdat zij alles tot op de pixel kunnen zien. Alle kleurcodes, lettertypes en formaten staan erbij.

Verder heb ik helaas niets meer gehoord over dit project omdat ik weer terug verhuisd ben naar Create. Als de realisatie compleet is ben ik heel benieuwd hoe het geworden is en het is natuurlijk super cool om je eigen ontwerp live te zien gaan. Verder heb ik hier natuurlijk ook iets van geleerd. (Dat is waarom we hier zitten.)

Ik heb geleerd dat het onderzoek doen naar klanten, concurrentie en dergelijke enorm belangrijk is als je een website wil ontwerpen. Zonder informatie en inspiratie kom je nergens.

Ik ben immens nieuwsgierig naar de komende maanden en kan niet wachten mijn portfolio uit te kunnen breiden.

Josephine Lambers