Ontwerpen in Adobe XD (deel 2) - Vormgeven

Geschreven door: op maandag 30 juli 2018

Leestijd:

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

Kleurenpalet

Deze kleuren zijn gekozen na het opstellen van moodboards.

 

Typografie

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.

Low-fi design

 

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.

Kleuren tekenen

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

Kleuren toevoegen aan palet

Kleuren in palet bewerken

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:

Groen

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.

Achtergrond aanpassen 1

Achtergrond aanpassen 2

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

Resultaat kleuren

 

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.

Typografie tekenen

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.

Resultaat typografie 1

Resultaat typografie 2

Resultaat typografie 3

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:

Resultaat fotografie 1

Resultaat fotografie 2

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!

Eindresultaat

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!


Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd gazellen 2017
Google analytics
partners-logo.jpg

mockup_tablet.png

Bedient u uw (potentiële) klant optimaal binnen het online koopproces? 

Vul de Online Scorecard in ›