Inleiding
De eerste competentie die ik heb gekozen om tijdens mijn stage te behalen is conceptualiseren. Deze competentie heb ik gekozen omdat ik het genereren van ideeën altijd al erg leuk vind en ik deze stap van het uitwerken van deze ideeën graag wil toepassen in het werkveld waarbij ik tips en feedback op mijn werk kan ontvangen van echte professionals.
Tijdens mijn stage heb ik conceptualiseren op meerdere manieren en opdrachten toegepast, hiervan zal ik er maar twee helemaal toelichten. Namelijk het conceptualiseren van een paar pagina’s voor de nieuwe website van DutchGiraffe. De andere heb ik wel mee kunnen nemen door de lessen die ik daarvan heb geleerd. Bijvoorbeeld bij het maken van mijn eerste eigen online magazine, dit was de opdracht in de eerste week. Hierbij heb ik helemaal zelf een concept opgezet en uitgewerkt tot visualisaties. Een eerste project dat ik heb gemaakt met de kennis die ik al had, maar de feedback en tips die ik kreeg bij het conceptualiseren en uitwerken van dit magazine hebben mij al veel geleerd. Dit kon ik heel fijn toepassen bij mijn werkzaamheden tijdens mijn stage bij DutchGiraffe, en uiteindelijk bij het uitvoeren van mijn twee competenties.
Andere opdrachten zoals een nieuwe editie voor CACEIS als concept uitwerken waarbij het magazine en het ontwerp moesten passen bij de content die de klant had aangeleverd, hier heb ik ook geleerd hoe belangrijk deadlines zijn en het tijdig aangeven als je deze niet kan halen. Daarnaast heb ik ook teaser magazines mogen maken voor potentiële klanten, waarbij ik een geprint pdf magazine moest omzetten tot een concept en uitwerking in een online magazine.
Op deze pagina zal ik toelichten hoe ik het conceptualiseren heb toegepast op de nieuwe website van DutchGiraffe. Hier heb ik vooral de laatste paar weken van mijn stage aan gewerkt en voelt echt als een toepassing van alles wat ik al geleerd heb bij mijn stagebedrijf.
Wat is conceptualiseren voor mij?
Voor mij betekent conceptualiseren het bedenken van ideeën en ze tastbaar maken. Dit omvat ook brainstormen om alle ideeën en informatie te ordenen zonder beperkingen. Bij conceptualiseren streef ik naar het ontwikkelen van de meest optimale vorm en het tastbaar maken ervan. Het gebruik van gebruiksvriendelijke ontwerpmethoden en creativiteit is hierbij essentieel om alle diverse ideeën uit te werken.
Bij het conceptualiseren richt ik me op het creëren van concepten die voldoen aan ontwerpuitdagingen en waarde toevoegen voor zowel gebruikers als opdrachtgevers. Het is belangrijk om veel verschillende ideeën te verkennen om zo de beste optie voor een ontwerpuitdaging te kunnen kiezen. Ik streef ernaar diverse perspectieven en belanghebbenden mee te nemen in dit proces. Bij elke taak begin ik met het opstellen van user stories, die laten zien wat specifieke belanghebbenden willen bereiken, waarom dit belangrijk is, en wat daarvoor nodig is.
Bij het conceptualiseren zou ik liever taken krijgen zonder kaders maar dit was bij DutchGiraffe helaas niet mogelijk. Om deze reden heb ik het conceptualiseren uitgewerkt als het uitwerken van de ideeën tot schetsen en low-fidelity prototypes. Dit kon ik wel toepassen bij het herontwerp van de nieuwe website voor DutchGiraffe.
Bij DutchGiraffe gebeurt conceptualiseren eigenlijk alleen bij de opdrachten voor nieuwe online magazines of websites. Bij andere opdrachten wordt er wel kort gebrainstormd over wat er nodig is, maar er wordt niet uitgebreid geconceptualiseerd. Bij de opdrachten voor nieuwe online magazines gebeurt dit wel. Dit zijn de opdrachten die ik het meest bij mijn collega’s heb gezien tijdens mijn stageperiode. Soms was er al een geprint magazine dat ze wilden omzetten naar een online versie. Dit was nogal een stap en daarom zetten collega’s eerst een concept op in Figma, voordat ze dit gingen bouwen in WordPress. Het conceptualiseren ging al snel over in visualiseren, omdat klanten graag hun eigen logo en huisstijl in het ontwerp wilden zien.
Situatie
Bij DutchGiraffe zijn we bezig met het herontwerp van onze eigen website, omdat deze wat ouder is en we ook de nieuwe huisstijl willen toepassen op een nieuw ontwerp. Anne, als UX Designer, was al begonnen met het herontwerp en had al veel pagina’s uitgewerkt, maar nog niet zoveel voor de expertisepagina. Ik wilde graag meewerken en dat vond ze goed. Bij deze taak is vooral mijn collega Anne betrokken, omdat zij ook bezig is met het herontwerp van andere pagina’s. Ik heb contact met haar voor vragen en feedbackpunten. Het conceptualiseren van de expertisepagina heb ik voornamelijk op kantoor bij DutchGiraffe gedaan, maar ook een paar dagen thuis tijdens het thuiswerken op woensdagen. Vooral in weken 16 en 17 heb ik aan de overzichts- en subpagina van de expertise gewerkt.
De expertise pagina op oude website van DutchGiraffe
Actie
Ik had eerst een meeting met Anne om de precieze taak te bespreken: het uitwerken van concepten voor de Expertise overzichtspagina en een subpagina als opzet. Ze vertelde dat ze zelf bezig is met de nieuwe website voor DutchGiraffe, maar nog niet aan een aantal pagina’s en blokken was begonnen. De ontwerpen die ze al had gemaakt, zijn te zien in de afbeeldingen hieronder. Ik kreeg de taak om te helpen met deze ontbrekende pagina’s en blokken. Naast andere taken heb ik ook het concept bedacht, en vervolgens de visualisatie en prototype gemaakt van de Expertise pagina. Deze pagina toont de vier expertises van DutchGiraffe. De nieuwe tekst en content zijn nog niet definitief, hiervoor heb ik gebruikgemaakt van de huidige content.
Na deze meeting ben ik begonnen met het opschrijven van mijn ideeën, zowel eigen ideeën als inspiratie die ik op internet vond. Ik besloot eerst de echte vereisten op te schrijven voordat ik nadacht over de vorm van het concept. Daarvoor heb ik een tabel gemaakt met gebruikersbehoeften die beschrijven wat nodig is voor specifieke rollen, wat men wil bereiken, en welke middelen daarvoor nodig zijn.
Ik zocht op internet naar ideeën voor mijn ontwerp. Op https://www.frog.co/ zag ik een cool effect als je scrollt, maar voor de Expertise pagina van DutchGiraffe is het belangrijk dat alle informatie snel en overzichtelijk te vinden is, zonder te veel scrollen. Ik keek ook naar https://www.accenture.com/nl-en voor inspiratie voor animaties in blokken. Ze gebruikten hier animaties om informatie interessanter te maken. Dat vond ik inspirerend omdat het hielp om de pagina’s mooi te maken maar ook gebruiksvriendelijk.
Op https://www.toptal.com/ zag ik hoe kleuren veranderden als je met je muis over blokken ging. Dat was leuk, maar ik bedacht dat als we dat bij DutchGiraffe zouden gebruiken met onze oranje kleur, het misschien te veel zou worden. Door deze websites te bekijken kon ik mijn ontwerp ideeën verder ontwikkelen, zodat de nieuwe Expertise pagina van DutchGiraffe zowel mooi als makkelijk in gebruik zou zijn.
Daarna voelde ik dat ik een goed begrip had van de taak en alle opties. Ik had al ideeën voor verschillende concepten voor de expertisepagina. Daarom ben ik deze ideeën gaan uitwerken door middel van schetsen.
Ik begon met het schetsen van een ontwerp waarbij de vier blokken naast elkaar zouden staan. Dit ontwerp zou precies op de pagina passen, waardoor de titels van de vier expertises direct zichtbaar zouden zijn zonder te hoeven scrollen. De exacte hoogte van de blokken stond nog niet vast, omdat dit afhing van de hoeveelheid tekst en de afbeeldingen die uiteindelijk op de achtergrond zouden komen. Aangezien ik op dat moment nog geen afbeeldingen gebruikte, was de hoogte van de blokken variabel tot ik verder ging met het visualiseren van het ontwerp.
Tijdens het schetsen heb ik ook al nagedacht over de hover-effecten, maar ik zal dit uitgebreider toelichten bij de tweede competentie, omdat dit beter past bij het maken van visualisaties en prototypes.
Ik overwoog ook andere opties voor de vier blokken, zoals ze per twee onder elkaar te plaatsen of allemaal onder elkaar. Dit zou echter betekenen dat gebruikers meer moeten scrollen om alle expertises te kunnen zien.
Daarna heb ik de verschillende schetsen uitgewerkt in Figma. Ik heb daarbij de header met kleur gebruikt, omdat deze al ontworpen was en ik prettiger werk met wat kleur in mijn ontwerp. Voor de verdere uitwerking van de concepten, zoals de blokken, heb ik grijs tinten gebruikt.
Hieronder zie je screenshots van de eerste concepten. In deze schermen is het concept alleen zichtbaar boven de vouw, waardoor het bij de tweede en derde optie niet duidelijk is dat je verder kunt scrollen voor meer expertises. Daarom wilde ik bij het uitwerken van deze versies meer aandacht besteden aan blokken die half in beeld staan, zodat gebruikers kunnen zien dat er meer content volgt als ze naar beneden scrollen.
Na een kort feedbackmoment net voor de lunch heb ik mijn concepten met Anne besproken. Het eerste wat ze zei was dat het vijf expertises worden in plaats van vier. Dit was iets wat ik tijdens de eerste meeting had gemist, en Anne was ook niet zeker of ze het wel had genoemd. Hoe dan ook, dit maakte het makkelijker om een keuze te maken tussen de concepten.
Met vijf blokken past het niet meer om alle blokken naast elkaar te plaatsen op het meest gebruikte schermformaat van 1920×1080. Als ik dat zou doen, zouden de blokken te smal worden, waardoor de tekst niet goed leesbaar zou zijn. Daarom vond ik de concepten met alle blokken naast elkaar of per twee onder elkaar niet langer relevant.
Ik ben verder gegaan met het uitwerken van de derde optie, waarbij alle expertises onder elkaar worden geplaatst, omdat dit nu beter past bij het nieuwe aantal expertises.
In dit concept voeg ik een hover-effect toe waarbij een korte tekst en een knop verschijnen om meer te lezen over de expertise. Door de breedte van de blokken zal de gebruiker bij het scrollen automatisch over elke expertise heen gaan en de hover-informatie zien.
In dit concept zou de titel zich in het midden van het scherm bevinden, met de tekst en de knop eronder, allemaal gecentreerd. Echter, Anne gaf al feedback dat in de rest van het nieuwe ontwerp nergens tekst gecentreerd is. Daarom heb ik gekeken naar alternatieven waarbij de tekst links wordt uitgelijnd. Bovendien leest dit prettiger omdat je ogen dan gemakkelijk de volgende regel kunnen vinden tijdens het lezen.
Voor dit concept heb ik de lay-out uitgewerkt met de tekst aan de zijkant en daarbij een afbeelding die aansluit bij de expertise. Onder de tekst heb ik een vlak toegevoegd in de huisstijlkleur donkergrijs, wat zorgt voor een goed contrast tussen de tekst en de achtergrond.
Bij deze concepten waarbij alle expertises onder elkaar staan, moet de gebruiker wel naar beneden scrollen om ze allemaal te kunnen bekijken. Ik dacht dat het handig zou zijn om bovenaan de pagina, boven de vouw, een kleine navigatie te hebben met alle expertises. Echter, Luc merkte op dat alle expertises al in een overzicht op de homepage staan. Daarom vond ik dat een extra overzicht niet per se nodig is.
Ik heb de blokken verder uitgewerkt in Figma om ze beter te kunnen beoordelen. Het ontwerp heeft nu duidelijk leesbare tekst dankzij goed contrast, en de afbeeldingen kunnen in normaal formaat worden toegevoegd. Ik vond echter dat dit ontwerp te veel leek op het oude ontwerp dat al op de website staat.
Het oude ontwerp heeft ook vijf rijen onder elkaar met tekstblokken en afbeeldingen die afwisselend links en rechts staan. Ik vind eigenlijk stiekem dat dit ontwerp best leuk is en goed past bij de expertises. Ik wil echter wel de afbeeldingen beter laten aansluiten bij de expertises. Voor deze taak wil ik echter een echt nieuw concept uitwerken dat deze pagina een nieuwe uitstraling geeft en interessanter maakt om te lezen.
Ik vond het idee van vijf blokken onder elkaar nog steeds erg leuk en overzichtelijk. Ik moest echter een andere indeling vinden vanwege het oneven aantal. Het was niet zo eenvoudig om een passende oplossing te vinden, maar na wat onderzoek tussen mijn inspiratiebronnen en de ontwerpen van collega’s, kon ik weinig inspiratie vinden die ik kon toepassen met een oneven aantal blokken. In een van de schetsen van Anne zag ik dat ze drie blokken schuin onder en naast elkaar had geplaatst. Daarbij had ze echter de foto en tekst onder elkaar gezet, terwijl ik dat als één geheel wilde integreren.
Ik heb eerst deze ideeën weer op papier gezet met schetsen. Voor de titel, tekst en call-to-action (CTA) bovenaan de pagina heb ik hetzelfde gehouden als bij eerdere concepten.
Ik heb de vijf blokken uitgewerkt met een transparant grijze achtergrond waarop een afbeelding te zien is die past bij de expertise. De afbeelding vind ik belangrijk omdat het sterk bijdraagt aan het beeld dat een potentiële klant krijgt bij het lezen van de expertises en wat DutchGiraffe allemaal kan. Bij het linker concept zou de tekst echter een groot deel van de afbeeldingen bedekken. Daarom heb ik ook concepten uitgewerkt waarbij alleen de titel zichtbaar is en de tekst met knop pas verschijnt bij een hover over het blok. Een alternatief zou zijn dat de toelichtende tekst en knop zichtbaar worden als de gebruiker langs het blok scrollt, wat gebruiksvriendelijk kan zijn en ervoor zorgt dat er geen informatie wordt gemist. Dit kan echter technisch complex zijn om zelf te coderen.
Voor deze concepten heb ik ervoor gekozen om alleen een hover-animatie uit te werken die de tekst laat zien. Op dit moment werkt deze animatie nog niet, want dat komt bij het visualiseren. Ik wil dit vermelden, anders lijkt het alsof ik de tekst gewoon heb verwijderd. Bij de laatste expertise zie je de hover-staat.
Bij de vijf blokken is het nog variabel hoe hoog ze zijn, waar de tekst uitgelijnd wordt en welke positie ze innemen. Ik heb twee verschillende opties geprobeerd: een met drie blokken aan de linkerkant en drie aan de rechterkant. Bij de derde optie met de blokken aan de rechterkant kunnen deze ook wat naar boven worden geschoven, waardoor het eerste blok al zichtbaar zou zijn boven de vouw. Dit maakt duidelijk dat de pagina verder gaat en dat de gebruiker moet scrollen.
Ik heb eerst een optie met gecentreerde tekstuitlijning geprobeerd, maar uiteindelijk neigde ik meer naar links uitlijnen om het beter leesbaar te maken. Het links uitlijnen zou ook esthetisch mooier zijn, omdat de informatietekst onder de titel dan gelijk begint en consistent is bij alle blokken.
In deze concepten heb ik ervoor gekozen om de tekst linksboven uit te lijnen, zodat het eerste blok al leesbaar is boven de vouw. De tekst is nu mooi uitgelijnd met de titel en de knop, die pas zichtbaar worden bij hover, waardoor de pagina niet te druk wordt.
Een variatie op het concept is het rechter concept met kortere blokken, die groter worden bij hover waarbij ook de tekst en knop te zien zijn. Bij dit concept moet de knop eigenlijk worden verwijderd en moet het hele blok klikbaar worden gemaakt. De knop in de hover kan namelijk niet worden gebruikt, omdat je dan niet meer hovert en het blok weer ingeklapt wordt. Dit maakt het concept minder aantrekkelijk, omdat een knop normaal gesproken duidelijk maakt dat erop geklikt kan worden. Daarom heb ik gekozen voor het linker concept zoals hierboven beschreven.
Ik heb ook concepten opgezet voor de subpagina’s van de expertises. Hierbij mocht het ontwerp meer in de buurt blijven van het oude ontwerp, maar moest het wel een nieuwe uitstraling hebben die past bij de rest van het nieuwe ontwerp.
Het oude ontwerp ziet er als volgt uit:
Voor deze pagina wilde ik het beeld bovenaan behouden, maar wat minder prominent maken zodat de titel groter in beeld kan komen, zonder dat het beeld te overheersend is. Ik heb twee concepten uitgewerkt voor hoe ik de tekst precies wil weergeven. De inhoud, zoals de teksten, waren voor deze taak nog niet definitief, daarom kon ik nog daar geen aanpassingen aan doen. Ik overwoog ook om duidelijkere en mogelijk meer afbeeldingen toe te voegen, afhankelijk van de exacte teksten. Wat ik wel al wist, is dat ik een quote van een collega of klant wilde toevoegen om de tekst te onderbreken en potentiële klanten een boodschap mee te geven over de ervaring met die expertise.
De tekst in twee kolommen naast elkaar maakte de pagina wel wat korter maar wel drukker. Hierdoor is de tekst minder goed leesbaar. Om deze reden vond ik het linker concept wel beter, aangezien de tekst hier allemaal overzichtelijk onder elkaar staat. De afbeeldingen tussendoor zouden de breedte van de tekst kunnen hebben, maar ook van de hele breedte van het scherm. Deze afweging zou per beeld en afbeelding nog gemaakt moeten worden.
Om het concept beter vorm te geven, heb ik bij het onderstaande concept alvast de titels toegevoegd die boven de tekst zouden kunnen staan. Hierbij heb ik ook gekeken naar de lengte van de alinea’s en of deze representatief zijn.
Deze pagina diende vooral als opzet voor de subpagina’s en hoefde daarom nog niet specifiek geconceptualiseerd te worden. De aspecten die ik wel wilde toevoegen aan het concept waren voldoende afbeeldingen en onderaan de pagina een mogelijkheid om contact op te nemen, samen met verschillende blokken die doorverwijzen naar de andere expertises. Deze blokken zouden qua ontwerp vergelijkbaar zijn met die op de overzichtspagina van de expertises, maar zonder tekst in de hover. De blokken zijn namelijk klein, en naar mijn mening zou tekst ze te druk maken. Daarom heb ik ervoor gekozen om alleen de titels weer te geven. Na een klik op zo’n blok komt de gebruiker immers al op de pagina met de gedetailleerde uitwerking van de expertise.
Resultaat
Het resultaat waren twee concepten die mijn ideeën vormgeven voor de expertise overzichtspagina en een subpagina van een expertise. Beide concepten heb ik uitgewerkt in Figma op een scherm van 1512 px breed, gebaseerd op het formaat van een ander nieuw ontwerp voor de DutchGiraffe website, gemaakt door Anne. Hierdoor kon ik duidelijk mijn ideeën aan mijn collega’s presenteren voor deze pagina’s, wat hen in staat stelde om te reageren en feedback te geven voordat ik verder ging met het uitwerken van deze concepten naar visualisaties en prototypes. De reactie was overwegend positief, hoewel natuurlijk uitgebreid omdat het mijn ideeën waren waar mijn collega’s ook al ideeën over hadden. Bij het visualiseren zal ik proberen deze input samen te brengen tot pagina’s die goed passen bij DutchGiraffe.
Het concept voor de overzichtspagina van de vijf expertises van DutchGiraffe, met een scherm om te laten zien dat de eerste expertise boven de vouw uitkomt. Volgend door een screenshot van de hele pagina, de hover is te zien bij de vijfde expertise.
Deze overzichtspagina zal links bevatten naar alle subpagina’s van de expertises. Het concept voor UX Design dient als voorbeeld om mijn ideeën te illustreren. Mijn focus lag hierbij op het gebruik van beelden ter versterking van de tekst, het toevoegen van een contactmogelijkheid, en het plaatsen van een menu met blokken van de andere vier expertises onderaan de pagina. Dit laatste zorgt ervoor dat potentiële klanten gemakkelijk toegang hebben tot de juiste expertises, zelfs als ze in eerste instantie de verkeerde hebben aangeklikt.
Hier de subpagina voor de expertise UX Design als voorbeeld. Voor nu zal ik ze wel naast elkaar laten zien zodat de kwaliteit van het beeld goed blijft.
Reactie
Op een mooie zonnige donderdagmiddag op kantoor bij DutchGiraffe was het tijd voor een 360 graden feedbackmoment met mijn UX Designer collega’s Luc en Anne. Ik heb deze gelegenheid goed benut om feedback te verzamelen op mijn concepten. Hierna ga ik deze concepten omzetten naar visualisaties, die hopelijk ook daadwerkelijk gebruikt kunnen worden voor de nieuwe website van DG.
Ik heb voornamelijk samengewerkt met Anne, daarom gaf ik Luc eerst een korte introductie over de opdracht en wat ik moest conceptualiseren. Dit omvatte drie onderdelen: expertises, cases en contact opnemen. Voor de expertises zou dit zowel een overzichtspagina als een detailpagina zijn, waarbij Anne al ontwerpen had gemaakt voor de detailpagina’s. Voor de homepagina ging het alleen om blokken voor de cases en contactmogelijkheden. De details van deze blokken voor de homepagina zal ik beschrijven in het tweede voorbeeld binnen deze competentie.
Dit 360 graden feedback moment bood een uitgelezen kans om diverse vormen van feedback te ontvangen. Anne’s input was inhoudelijk sterk vanwege haar betrokkenheid bij het project, wat verschilde van Luc’s feedback. Hij was niet bekend met het ontwerp van de nieuwe DG-website en had nog geen eerdere kennis van mijn werk gezien.
Ik begon het feedbackmoment door de eerste versies te tonen om de ontwikkeling van de uiteindelijke concepten te illustreren. Oorspronkelijk waren de ontwerpen gebaseerd op vier expertises, maar de nieuwe website zou er vijf bevatten. Dit betekende dat sommige ontwerpen werden verworpen. Luc vroeg meteen hoe ik de ontwerpen zou aanpassen voor vijf expertises. Samen concludeerden we dat dit mogelijk is, maar het zou ten koste gaan van het ontwerp. Het zou leiden tot ongelijke blokken of het gebruik van horizontaal scrollen, wat niet wenselijk is voor een overzichtspagina waar alle informatie zichtbaar moet zijn zonder dat de potentiële klant iets mist.
Tussendoor vroeg Luc ook of hij de homepagina kon zien waar de expertises worden uitgelicht. In eerste instantie gaf hij aan dat het belangrijk is om alle vijf expertises boven de vouw te hebben op de expertisepagina. Echter, nadat hij de homepagina had gezien, merkte hij op dat dit minder noodzakelijk was, omdat daar al een overzicht van de expertises werd gegeven.
Hierboven zie je het blok over de expertises voor op de homepagina, dat Anne had ontworpen. Naar aanleiding van dit blok stelde Luc ook de vraag of een extra expertisepagina wel nodig is als er al een duidelijk overzicht op de homepagina staat. Anne vertelde toen dat ze voor zoekopdrachten, SEO en digitale toegankelijkheid wel een knop bovenaan de navigatie willen hebben die linkt naar een aparte pagina waar de expertises worden toegelicht.
Dan terug naar de overzichtspagina van de expertises van DutchGiraffe. Hieronder zie je een screenshot van meerdere concepten naast elkaar. Anne en Luc waren het met mij eens dat de eerste vier concepten eigenlijk nog te veel lijken op de huidige pagina. Ze vonden echter mijn vijfde en zesde concept een leuk idee. Ze vonden de blokken die zo naast en onder elkaar staan speels en overzichtelijk. Wel gaven ze aan dat de blokken nu goed leesbaar zijn omdat ze grijs zijn, maar als dit een afbeelding zou zijn, zou er wel een grijze laag achter moeten komen.
Ze dachten mee en opperden dat een flip card ook een optie zou kunnen zijn, waarbij je aan de ene kant een afbeelding hebt en aan de andere kant de tekst op een grijze achtergrond. Hierbij zou het contrast goed hoog zijn. Ik vond dit zeker een goed idee om uit te proberen, maar ik wilde de hover met animatie waarbij de tekst van onder komt nog niet helemaal loslaten. Ik wil beide opties uitwerken en bij het visualiseren kiezen welke het beste past bij de beelden en opmaak. Luc gaf wel de tip om alvast te testen met een afbeelding en tussenkleur om het contrast te checken. Ik heb ervoor gekozen om dat te doen en zal dit proces verder toelichten bij de volgende competentie.
Daarnaast kwam Anne met goede feedback over de intro tekst bovenin, deze wijkt namelijk af van andere ontwerpen van Anne. Aangezien geen enkele andere pagina begint met wit en tekst. Alle pagina’s beginnen eigenlijk met een blok van een foto of kleur achtergrond. Hierdoor kwamen we op het idee om deze ook als los blok vorm te geven met een grijze achtergrond. De tekst kon daarbij ook wel wat groter en hier kreeg ik de tip om de verschillende stijlen van de titels hier uit te proberen.
Vervolgens merkte Anne op dat de blokken nu langer zijn dan de tekst en dat er veel padding om de tekst heen zit. Anne en Luc waren het erover eens dat de tekst over de hele breedte mag doorlopen met gelijke padding. Ook zou de lengte van de blokken meer moeten passen bij de lengte van de tekst. Ze gaven aan dat ik mocht aangeven dat er een maximaal aantal zinnen gebruikt moet worden zodat de tekst altijd goed binnen het blok past. Alle blokken moeten wel dezelfde hoogte behouden, daarom moest ik een goede balans vinden in de hoogte van deze blokken.
Ook over de subpagina van de expertises heb ik ook feedback verzameld, hoewel het nog vooral een opzet is. Anne gaf als eerste aan dat ze de pagina graag wat spannender zou zien, en daar was ik het mee eens. We kwamen echter tot de conclusie dat we nog niet precies wisten hoe we dit konden bereiken, vooral omdat we nog geen nieuwe inhoud hebben voor de subpagina’s. Anne gaf wel aan dat ze minder tekst wilde zien, wat ze ook voor zichzelf heeft genoteerd voor de nieuwe inhoud.
Voor de afbeeldingen gaf Anne de feedback dat deze ook over de hele breedte van het scherm geplaatst zouden moeten worden. Ook vonden ze het idee van voorbeelden van eerder werk en quotes van collega’s of klanten leuk, maar bij deze pagina’s vonden ze vooral de quotes goed passen. Voorbeelden van andere cases zouden al op de naastgelegen pagina staan, wat dubbelop zou zijn.
Voor de vier andere expertises die onderaan de pagina staan, waren ze het eens om de hover weg te halen en hier alleen de titels weer te geven. Ze gaven de tip om wel iets te laten bewegen bij een hover; eventueel de foto laten vergroten zou duidelijk maken dat het klikbaar is. De titel zou gecentreerd kunnen staan of linksboven zoals op de overzichtspagina. Dit zal ik bij het visualiseren moeten zien om een keuze te kunnen maken.
Al met al kreeg ik ook de feedback van beiden dat ze het goed vonden hoeveel ideeën ik had uitgewerkt. Ze vonden het inspirerend om te zien hoe ik verschillende concepten had ontwikkeld en uitgewerkt voor de expertises en subpagina’s. Bovendien merkten ze op dat ik al stappen had gemaakt sinds het begin van mijn stage. Deze erkenning was voor mij erg motiverend en bevestigde dat ik goed op weg ben in mijn ontwikkeling binnen DutchGiraffe.
Reflectie
Eerlijk gezegd vond ik het conceptualiseren van de overzichtspagina en subpagina voor de expertises een uitdagend en langdurig proces. Misschien ben ik hier nog iets te perfectionistisch in, maar er zijn zoveel verschillende opties om deze pagina’s in te delen dat het lastig blijft om een definitieve keuze te maken en daarbij te blijven. Ik waardeerde het enorm om feedback van mijn collega’s te ontvangen; ik heb hier echt veel van geleerd. Ik merkte dat zij, met hun jarenlange ervaring in het vakgebied, bijna altijd direct ideeën hadden voor de uitdagingen waar ik tegenaan liep. Dat was heel inspirerend en ik hoop dat ik daar ook naartoe kan groeien naarmate ik meer ervaring opdoe.
Het uitwerken van de concepten verliep goed, ondanks de vele opties die er waren. Ik heb het gevoel dat ik de juiste keuzes heb gemaakt, en het was fijn om te horen dat Anne en Luc het hiermee eens waren. Ik ben zeker tevreden met de concepten die ik heb ontwikkeld. Met alle feedback en tips die ik heb ontvangen, kijk ik ernaar uit om deze toe te passen bij het visualiseren.
De belangrijkste les die ik heb geleerd, is toch wel dat ik meer in mezelf moet geloven en dat het waardevol is om tips aan mijn collega’s te vragen. Ook al kan ik het zelf ook, samen gaat het vaak sneller en efficiënter. Daarnaast heb ik veel opgestoken van hun oog voor detail; bij al mijn concepten zagen ze of de padding goed en gelijk was, of de tekstgrootte klopte, en of het geheel bij elkaar paste. Dit laatste is algemener en minder gedetailleerd, maar juist daarom ook belangrijk. Verder heb ik geleerd om niet te veel te focussen op één pagina, maar om het overzicht van alle pagina’s te behouden. Tot nu toe deed ik dat eigenlijk nog niet, wat ervoor zorgde dat ik extra werk had. Mijn ontwerpen waren wel mooi, maar pasten simpelweg niet goed bij de rest van de ontwerpen.
Het omzetten van een opdracht en taak naar concepten verliep bij dit voorbeeld nog niet helemaal soepel, maar ik heb hier wel echt grote stappen in gemaakt en veel van geleerd. Het resultaat mag er ook zeker zijn; ik had al vaardigheden om concepten op te stellen en deze zijn de afgelopen tijd nog verder verbeterd. Daar ben ik heel blij mee! In deze situatie heb ik het conceptualiseren dan ook zeker goed uitgevoerd. Mijn score ligt nog gemiddeld, want het kostte een paar feedbackmomenten en iteraties, maar desalniettemin zijn de concepten goed uitgewerkt en gebruiksvriendelijk. Wanneer ik alle feedback verwerk bij het visualiseren, zullen ze ook goed passen bij de rest van de ontwerpen en zullen de details ook kloppen.
Transfer
De volgende keer zou ik graag willen beginnen met een taak waarbij ik vanaf het begin vrij kan conceptualiseren, zonder strikte kaders. Het zou waardevol zijn om meer ruimte te hebben om mijn creativiteit te verkennen en mijn ideeën vrij te kunnen ontwikkelen. Hierdoor kan ik dieper ingaan op verschillende mogelijkheden en concepten verkennen die mogelijk buiten de beperkte opties vallen.
Ook zou ik beter willen bespreken wat de inhoud van de pagina’s zal zijn die ik moet conceptualiseren. Met name het aantal focuspunten of onderwerpen zou ik in één keer goed willen kunnen toepassen. In een eerste gesprek zou ik hier direct naar vragen. Als dit nog niet bekend is, zou ik in het vroege stadium van het conceptualiseren al extra feedback willen vragen om te verifiëren of mijn ideeën al overeenkomen met de opdracht.
Het uitwerken van de vele verschillende ideeën en opties wil ik zeker blijven doen. Hiermee voorkom ik tunnelvisie en kan ik altijd tussendoor nog wisselen van concept, aangezien die ook allemaal uitgewerkt zijn. Hierdoor kan ik bij een visualisatie altijd nog verschillende onderdelen van verschillende concepten toepassen. Wel zou ik de verschillende ideeën iets minder gedetailleerd uitwerken, om wat sneller en efficiënter te werken. Die details kan ik wel toevoegen wanneer het concept meer vaststaat en er een visualisatie van gemaakt moet worden.
Ook het opstellen van de user stories aan het begin van het proces maakt de taken en de ontwerpuitdagingen overzichtelijk. Deze user stories heb ik nu echter zelf opgesteld met inleving in de belanghebbenden. In de toekomst zou ik deze liever rechtstreeks van echte belanghebbenden willen horen. Dit maakt het nog representatiever en werkelijk gebruiksvriendelijk voor de juiste doelgroep. Het toepassen van de user stories vond ik ook lastig en wil ik de volgende keer in het ontwerp bestand erbij zetten zodat ik het niet vergeet toe te passen.
Situatie
Samen met het conceptualiseren van de expertisepagina’s mocht ik ook helpen bij twee blokken op de homepagina van de nieuwe website van DutchGiraffe: cases en contact. Voor deze twee blokken was er nog geen ontwerp of idee, en hiervoor moest een concept worden uitgewerkt voordat het verder kon worden ontwikkeld tot visualisatie en prototype.
Mijn collega Anne is ook bezig met de andere pagina’s en had wel de detailpagina’s uitgewerkt voor de cases en het contact. Met haar had ik het meeste contact voor tussentijdse tips en tops. Het werken aan deze concepten vond plaats in weken 17 en 18 op het kantoor van DutchGiraffe in Den Haag, en op woensdagen thuis, aangezien dan iedereen thuis werkt.
Het oude blok met cases
Het oude blok met contact
De belangrijkste benodigdheden die hieruit kwamen, waren een goed georganiseerde weergave van cases op de homepagina, waarbij er beelden en een beschrijving bij elke case staan. Voor het contact opnemen met DutchGiraffe was het belangrijk dat er contactgegevens en een contactformulier op de website staan.
Met deze kennis voor de inhoud ging ik aan de slag met het schetsen van de indeling van de blokken. Hierbij had ik veel ideeën voor verschillende soorten carrousels.
Op de website van WordPress Magazines worden mock-ups gebruikt van een laptop en een mobiel over elkaar heen, welke mij hebben beïnvloed bij het schetsen met deze opmaak. Echter, deze opmaak is van WPM en niet van DutchGiraffe, daarom heb ik gekozen om deze niet te gebruiken. De achtergrondblokken heb ik wel kunnen gebruiken voor de verschillende concepten. Deze concepten heb ik uitgewerkt in Figma.
Met deze verschillende carrousels wilde ik de cases duidelijk weergeven. Bij de eerste twee concepten ligt de focus steeds op één case tegelijk, maar ziet de gebruiker de volgende case al gedeeltelijk. Hier kan dan gemakkelijk naartoe genavigeerd worden door erop te klikken. Om de navigatie tussen cases nog duidelijker te maken, kunnen er pijlen of stippen onder de carrousel worden geplaatst die ook klikbaar zijn.
De derde optie zou meerdere cases tegelijk laten zien om een uitgebreider overzicht te geven aan potentiële klanten. Dit zou echter de beelden en beschrijvingen kleiner maken, waardoor ze minder goed zichtbaar zijn. Met de user stories in gedachte heb ik dit concept laten vallen. Hierdoor ben ik verder gegaan met het opstellen van concepten waarbij een carrousel steeds één case in de spotlight zet. Het schuiven naar boven en onder of het verkleinen van andere cases die niet in de spotlight staan, was een leuk idee, maar paste niet goed bij de stijl van de andere ontwerpen van de nieuwe website. Bovendien had Anne de tip om naar de opmaak van de losse cases op de detailpagina te kijken, omdat die opmaak ook goed op de homepagina zou passen. Daarom heb ik mijn concepten uitgewerkt met een vierkant beeld en de beschrijving eronder.
Bij deze concepten moest ik nog beslissen waar ik de cases wilde laten beginnen: aan de rand of in het midden van het scherm. Bij het links uitlijnen zouden er al twee cases tegelijk in beeld staan, wat misschien wat druk is. Bij het uitlijnen in het midden blijft er veel ruimte leeg en is het asymmetrisch, wat ik ook niet mooi vond. Ik vond het lastig om een keuze te maken, daarom ben ik eerst verder gegaan met het uitproberen van verschillende opties met de blokken.
Bij het linker concept staat de case wel in het midden, maar het is symmetrisch omdat er aan de rechterkant geen andere cases in beeld staan. Een andere optie was om de case in de spotlight over de hele breedte van het scherm te laten zien. Hierbij zou dan wel een passend beeld nodig zijn voor elke case dat mooi blijft bij die afmetingen. Daarnaast vond ik de concepten waarbij je een deel van de volgende case zag, duidelijker in gebruik. De gebruiker kan daarbij goed zien of er nog meer cases achter staan.
Om de vorm van de cases en het brede concept in de spotlight te combineren, heb ik een concept uitgewerkt waarbij de case in de spotlight iets breder is en de volgende case ook zichtbaar is. Als er naar de volgende case wordt genavigeerd, zal de huidige case weer het normale formaat krijgen en zal de nieuwe case in de spotlight breder worden. Dit concept heb ik verder uitgewerkt en zal ik toelichten bij het resultaat.
Voor het contactblok op de homepagina ben ik begonnen met het opzoeken van inspiratie. De oude website had namelijk wel een contactblok, maar dit bevatte geen contactformulier of contactgegevens, alleen een knop om naar de contactpagina te gaan. Voor de nieuwe website wilde ik het contact maken nog laagdrempeliger maken door dit al mogelijk te maken op de homepagina zelf. Om deze reden heb ik op Pinterest gezocht naar ‘Contactpagina’s’ en ‘Call to action blokken’. Daar kwamen onderstaande voorbeelden uit.
Linksboven staat meteen de belangrijkste inspiratie die ik had gevonden. Hierbij is de volgorde van het contactformulier namelijk omgedraaid. Potentiële klanten kunnen eerst hun vraag of bericht typen voordat ze hun gegevens invullen. Alle voorbeelden die mij aanspraken, hadden een duidelijk contrast tussen het blok met contactgegevens en het blok met het contactformulier. Dit wilde ik ook toepassen. Omdat ik al veel inspiratie had gezien en vooral wilde experimenteren met verschillende blokken, ben ik dit meteen gaan uitproberen in Figma. Ik heb daarbij kleur gebruikt om het contrast tussen de twee blokken te vergroten. Wetende dat Willy van DutchGiraffe de voorkeur geeft aan telefonisch contact, wilde ik eerst de contactgegevens prominent laten zien. Daarna zouden klanten de mogelijkheid moeten hebben om een e-mail te sturen. Om het voor elke potentiële klant toegankelijk te maken, wilde ik minimaal drie verschillende mogelijkheden bieden om contact op te nemen. Daarom heb ik het contactformulier als laatste optie in de hiërarchie toegevoegd.
Anne vond het idee dat de blokken over elkaar zouden vallen goed passen bij DutchGiraffe. Ik was het hier ook mee eens, maar vond het tweede blok wat krap en minder goed passen bij de rest van de ontwerpen voor de nieuwe website, aangezien deze ook allemaal over de hele breedte van het scherm lopen. Ik heb deze optie niet meteen verworpen, maar voor dit concept koos ik wel voor de derde optie met een oranje achtergrond die over de hele breedte van het scherm loopt. Dit concept heb ik uitgewerkt tot het definitieve resultaat.
Voor het contactblok wil de potentiële klant makkelijk contact kunnen opnemen met DutchGiraffe. Hiervoor heb ik minimaal drie mogelijkheden uitgewerkt: bellen, mailen en een contactformulier. Als vierde optie staat zelfs het adres erbij; klanten kunnen zeker komen aankloppen voor contact, maar in werkelijkheid zou dit adres vooral gebruikt worden door klanten die al contact hebben gehad. Het contactformulier zou ik vormgeven met een keuzemenu tussen de expertises, gevolgd door het bericht en daarna de contactgegevens van de klant. Alle mogelijkheden om contact op te nemen heb ik verwerkt tot onderstaand concept. Hierbij vond ik het belangrijk dat het goed opvalt, vandaar de felle oranje kleur. Bij visualisatie zou ik moeten checken of het contrast tussen de twee kleuren wel voldoende is om goed leesbaar te zijn.
De reactie op mijn concepten was zeker goed. Zowel Anne als Luc waren enthousiast om mijn ideeën uitgewerkt te zien. Samen hebben we feedback besproken en verliep het gesprek al snel naar tips voor het visualiseren van de concepten, omdat we allemaal te enthousiast waren en niet konden wachten om het ontwerp compleet te zien. Voor nu heb ik eerst alle feedback voor de concepten zelf ontvangen en deze zal ik toelichten in mijn reactie.
Reflectie
Het conceptualiseren van deze blokken voor de homepagina was minder uitgebreid dan voor de expertisepagina. Toch heb ik wat verschillende concepten kunnen uitwerken, waar ik blij mee ben. Hierbij heb ik ook geleerd hoe je andere ontwerpen op een nieuwe manier kunt toepassen voor blokken die erbij moeten passen. Het was lastig om nog echt eigen ideeën toe te voegen, maar het is me wel gelukt. Ik vind het resultaat dan ook een goede weergave van mijn ideeën die zijn uitgewerkt tot concepten.
Bij deze taak vond ik het nog lastiger dan bij de expertisepagina om echt te blijven conceptualiseren in plaats van direct te beginnen met visualiseren. Mijn collega’s gaven ook de tip om al beelden toe te voegen bij de concepten om beter te kunnen zien hoe het eruit zou komen te zien. Dit helpt zeker, maar voor deze competenties maakt het onderscheid wel lastiger. In het vervolg zou ik zelf bij het conceptualiseren echt bij zwart, wit en grijs blijven werken om goed te kunnen focussen op het doel van het concept.
Voor deze losse taak zou ik mezelf niet heel hoog scoren op het gebied van conceptualiseren, omdat er al veel kleur bij kwam kijken en het proces kort was. Als ik beide taken samen bekijk, vind ik wel dat de situatie en mijn aanpak voldoen aan de competentie conceptualiseren. De taken verschilden namelijk in mogelijkheden, maar voor beide heb ik een scala aan concepten kunnen opzetten die goed bruikbaar zijn voor het visualiseren en uiteindelijk uitwerken tot prototypes. Wat betreft de punten van feedback uit het 360-graden feedback moment kan ik me zeker vinden; deze punten ga ik allemaal verwerken bij het visualiseren van de concepten.