Ontwerpen in Adobe XD (deel 1) - Schetsen
In mijn vorige blogartikel kon je lezen waarom Adobe XD hét programma is om interactieve prototypes te maken. In dit artikel laat ik je zien hoe je met Adobe XD snel prachtige wireframes kunt maken om zo je nieuwe ideeën uit te schetsen en te testen. Dit is het eerste deel in een serie blogartikelen over het ontwerpen van Adobe XD, waarin ik je laat zien hoe je van een schets tot een interactief prototype komt. We gaan een mobiele website maken waar gebruikers artikelen kunnen lezen over het verzamelen van LP’s.
Een opzet creëren
Als eerste moeten we gaan bedenken welke schermen we willen maken. De gebruiker moet een overzicht kunnen zien van artikelen, een artikel kunnen lezen, gerelateerde artikelen kunnen vinden en een reactie kunnen achterlaten op een artikel. Dat betekend dus dat we twee wireframes moeten maken – een overzichtspagina en een artikelpagina. Laten we starten door een nieuw Adobe XD document aan te maken.
Omdat we een mobiele site gaan maken kiezen we hier de template ‘iPhone 6/7/8’, omdat deze de meest standaardresolutie voor mobiele telefoons bevat. Vervolgens maken we een extra pagina aan en hernoemen we de twee pagina’s die er staan ‘Overzichtspagina’ en ‘Detailpagina’.
Laten we starten met het plaatsen van alle elementen. Belangrijk om te noemen is dat we nu nog niet ons bezighouden met de vormgeving, dus werken we met grijswaarden en het standaard lettertype van Adobe XD. We starten door de header en de footer te maken.
Met de rectangle tool kunnen we blokken tekenen.
Tekst toevoegen
Vervolgens voeg ik tekst toe aan de header en footer. Dit doe ik met de tekst-tool.
Grids & Guidelines
Aan de rechterkant van het scherm kan ik de tekst in de header centreren. Tevens kun je hier ook andere eigenschappen van de tekst aanpassen. In eerste instantie is alleen de grootte en de uitlijning van de tekst belangrijk.
Adobe XD geeft hints over hoe je je elementen kunt uitlijnen. Hier kun je zien hoe we de titel van de website in de header kunnen centreren.
Om het uitlijnen van elementen nog makkelijker te maken stellen we een grid in voor onze pagina. Dit kun je doen door de pagina te selecteren en ‘layout’ onder grid aan te vinken. Dit is een mooi moment om ons document op te slaan, daar Adobe XD nog in ontwikkeling is en soms kan crashen.
Basiselementen groeperen en herhalen
Met de repeat grid-tool kun je elementen herhalen. Dit zorgt er voor dat de elementen makkelijk en snel te bewerken zijn en altijd dezelfde afmetingen bevatten.
Nadat we de header en footer hebben geschetst maken we van beide symbolen, zodat deze op alle andere pagina’s ook gebruikt kunnen worden.
We maken de beginselen van het artikeloverzicht. We starten door eerst één categorie uit te werken, die we met de eerder genoemde grid repeat-tool kunnen herhalen voor meerdere categorieën. Vergeet niet de pagina langer te maken waardoor we kunnen scrollen op de pagina. De stippellijn op de pagina geeft de vouw (het einde van het beeld op de telefoon) weer.
Laten we de groep die we gaan herhalen maken. Dit kun je doen door alle elementen die je wilt groeperen te selecteren en op rechtermuisklik > Group te klikken. Vervolgens herhalen we deze elementen een aantal keer.
De detailpagina
Vervolgens vullen we de detailpagina, met rechthoeken en tekst, zoals eerder genoemd. Je kunt lipsum.com gebruiken om tekst te genereren die als placeholder voor het artikel dient. Dit zorgt er voor dat je nog niet teveel over de inhoud nadenk, maar over de vorm die het artikel moet aannamen.
Ook hier gebruiken we de hoofdkolom om elementen netjes uit te lijnen. Laten we een symbol maken van het onderdeel ‘about the author’ zodat we dit element vaker kunnen gebruiken. Dit doen we door alle objecten te selecteren die we mee willen nemen in het symbool en op ctrl + K te drukken. Een vuistregel voor het bepalen of een groep van elementen een groep of symbol moet worden is: als je het één maal gebruikt maak je er een groep van, als je het element vaker gebruikt maak je er een symbol van.
Ook voor de reacties gebruiken we een repeat grid om de elementen te herhalen.
Omdat we ook gerelateerde artikelen willen tonen gebruiken we de artikelen op de overzichtspagina als voorbeeld. Dit element hebben we namelijk al gemaakt en brengt consistentie toe aan het ontwerp. Laten we hier ook gelijk een symbol van maken.
Afronden en preview
We zijn klaar met het plaatsen van de basiselementen. Laten we de grids op de pagina’s uitzetten waardoor we beter kunnen zien hoe ons ontwerp er uit ziet.
Onze draadmodellen zijn klaar! Zoals je kunt zien zijn ze simpel en overzichtelijk, maar bevatten ze alle functionaliteiten die we van te voren hebben opgesteld. We kunnen ons ontwerp goed testen door op de afspeel-knop te klikken.
In het volgende deel van deze serie blogartikelen kun je lezen hoe we dit ontwerp mooi maken door er kleur, typografie en fotografie aan toe te voegen.
