Ontwerpen in Adobe XD (deel 2) - Vormgeven

In het vorige blogartikel over Adobe XD kon je lezen hoe we voor de fictieve opdrachtgever ‘the Vinylist’ low-fi wireframes hebben getekend. Zodra je een low-fi schets hebt van een website of applicatie en deze uitvoerig met de opdrachtgever besproken hebt kun je de vormgeving gaan bepalen. Het voordeel van Adobe XD is dat je je low-fi(schets) wireframe makkelijk kunt ombouwen tot een hi-fi(vormgegeven) wireframe met uiteindelijke vormgeving. In dit artikel kun je lezen hoe je dat op een snelle, effectieve manier kan doen.

Het vormgevingsconcept

Voordat we kleuren, foto’s en typografie in onze wirefames gaan plaatsen is het belangrijk dat we een vormgevingsconcept ontwikkelen. Wij zijn bezig met het ontwerpen van een mobiele website voor een publicatie over langspeelplaten. Je kunt het vormgevingsconcept op verschillende manieren bepalen. Meestal heeft de opdrachtgever al een huisstijl die hij wilt uitstralen. Als dat nog niet bestaat dan moeten we zelf het vormgevingsconcept opstellen. Hiervoor moet het product, de opdrachtgever en de doelgroep uitvoerig onderzocht worden. In ons geval hanteren we het volgende vormgevingsconcept:

Sleutelwoorden

"Warm en nostalgisch met een stoflaagje."

Deze sleutelwoorden zijn opgesteld van onderzoek.

Kleurenpalet

Deze kleuren zijn gekozen na het opstellen van moodboards.

Typografie

Deze lettertypes zijn gekozen na het kiezen van de sleutelwoorden en het kleurenpalet. Let op dat als je een font selecteert, de klant de licentie kan veroorloven. Google Fonts is altijd een veilige bron om lettertypes vandaan te halen. Zorg er voor dat je niet meer dan twee lettertypes selecteert; meestal is één lettertype al voldoende.

Het ontwerp aanpassen

Nu we de stijl van de site hebben bepaald kunnen we deze gaan toepassen in ons ontwerp. Laten we voor we starten ons ontwerp van het vorige blogartikel openen in Adobe XD.

Kleuren toepassen

Om de kleuren toe te passen voegen we ze eerst toe in het palet van Adobe XD. Start met het tekenen van objecten en deze de gewenste kleuren te geven.

Selecteer de elementen en klik op het plusje bij ‘Colors’ om de kleuren toe te voegen.

Door elementen de kleuren uit het kleurenpalet te geven kun je alle instanties waarbij die kleur wordt gebruikt later aanpassen. Stel we zouden er voor kiezen om de kleikleur naar groen te veranderen dan zouden we het in het kleurenpalet kunnen aanpassen. Zo doe je dat:

Je kunt de kleur van de achtergrond van de pagina aanpassen door de pagina te selecteren en de gewenste kleur in het palet te selecteren.

Laten we de andere elementen in onze wireframe ook kleur geven! Zie hier hoe ik dit heb gedaan:

Typografie veranderen

Het standaardletterype van Adobe XD, Segoe UI is prachtig, maar we zullen ons ontwerp moeten doen onderscheiden met een ander lettertype. Laten we elementen toevoegen die we kunnen toevoegen aan het plakbord.

Ook hier geld- als je de lettertypes onder ‘character styles’ aanpast dan wordt het overal in het ontwerp toegepast. Ik raad aan eerst de basis toe te voegen, en achteraf extra character styles aan het plakbord toe te voegen omdat je tijdens het ontwerpen keuzes maakt over typografie.

Laten we de typografie zoals beschreven in het ontwerp toepassen.

Let op, je zult je ontwerp waarschijnlijk moeten aanpassen aan de hand van de typografische keuzes die je maakt. Zo heb ik de iconen in de header wat luchtiger gemaakt en de footer iets ruimer opgzet. Soms kun je ook wat schaduw toevoegen om er voor te zorgen dat gebruikers begrijpen waar ze wel en niet op kunnen klikken. Vergeet niet repeat grids uit te zetten als je elementen met schaduwen herhaalt in een serie; de schaduwen worden anders door het raster afgesneden.

Fotografie toevoegen

Om het visuele ontwerp af te maken en te testen zullen we fotografie moeten toevoegen. Je kunt op internet veel mooie fotografie vinden. Het is echter wel belangrijk om rekening te houden met copyright, ook als je een ontwerp alleen intern deelt. Pexels.com biedt honderden gratis foto’s aan die van de hoogste kwaliteit zijn en voor commercieel gebruik gebruikt mogen worden. Van deze site heb ik de fotografie gehaald waarmee wij ons ontwerp gaan vullen.

Je kunt een foto in het ontwerp heel erg simpel toevoegen: sleep de foto op het blok dat je wilt vullen en de het blok zal automatisch gevuld worden met de foto, ongeacht de afmetingen en verhouding van de afbeelding. Zie hier wat ik heb toegevoegd aan het ontwerp voor The Vinylist:

Soms is het goed om echte content in het ontwerp te plaatsen. Dit zorgt er voor dat de ontwerper de kleur- en typografiekeuzes kan bevestigen, en dat de opdrachtgever duidelijk kan zien hoe het er uiteindelijk gaat uit zien. Let op als je foto’s of namen van personen toevoegt dat het geen bekend persoon is. Soms kan het ook goed zijn om pseudoniemen in je ontwerp te laten voorkomen, omdat veel mensen op het internet liever anoniem blijven.

En… klaar!

We hebben van ons wireframe in grijswaarden een prachtige hi-fi wireframe gemaakt. Wat een verschil!

Voordat we deze kunnen gaan testen zullen we van ons ontwerp een prototype moeten maken. Hoe je dit doet lees je in het volgende blogartikel van deze serie!