Heb je een idee voor een geweldige app? Maak met Adobe XD een werkende mock-up die je op je telefoon kunt laten zien.
Draadmodellen downloaden:
1. Klik op de koppeling Wireframes (Draadmodellen) in het gedeelte UI-kits van het welkomstscherm van Adobe XD. Je kunt ze ook hier downloaden.
2. Klik op de koppeling Download kits (Kits downloaden) op de Behance-profielpagina.
3. Pak het bestand wires.zip uit en open het juiste .xd-bestand in Adobe XD.
Een ontwerp maken:
1. Selecteer het zoomgereedschap en sleep over de tekengebieden om ze van dichtbij te bekijken.
2. Kies het selectiegereedschap, klik en sleep om de gewenste elementen te selecteren, kies Edit > Copy (Bewerken > Kopiëren), kies File > New (Bestand > Nieuw), kies de gewenste grootte voor het tekengebied om een nieuw XD-document te maken, en kies tot slot Edit > Paste (Bewerken > Plakken) om de elementen in het nieuwe tekengebied te plakken.
Tip: Je kunt ook op de titel van een tekengebied klikken om de inhoud ervan te selecteren. Kopieer en plak de inhoud vervolgens in een nieuw bestand.
3. Klik met de Shift-toets ingedrukt om de elementen te selecteren die je niet wilt gebruiken, klik met de rechtermuisknop en kies Delete (Verwijderen).
Tip: Afhankelijk van hoe de tekengebieden zijn gemaakt, moet je mogelijk het deelvenster Layers (Lagen) openen (View > Layers of Weergave > Lagen), met de rechtermuisknop op een laaggroep klikken, Ungroup (Degroeperen) selecteren om de groep op te heffen en vervolgens de afzonderlijke elementen selecteren.
4. Sleep eventueel de resterende elementen om ze anders te rangschikken.
5. Dubbelklik op een vorm, zoals een rechthoek, om afzonderlijke, bewerkbare punten toegankelijk te maken. Sleep afzonderlijke punten in een pad om de vorm te wijzigen.
6. Herbruikbare tekenstijlen maken: Selecteer een tekstelement en maak het op met de instellingen in de gedeelten Text (Tekst) en Appearance (Weergave) van de Properties Inspector (eigenschappencontrole). Klik op het plusteken naast Character Styles (Tekenstijlen) in het deelvenster Assets (Middelen) (View > Assets of Weergave > Middelen) en hergebruik de stijl in je andere ontwerpen.
7. Herbruikbare symbolen maken: Maak een vorm of ontwerpelement (groepeer elementen indien nodig). Klik op het plusteken naast Symbols (Symbolen) in het deelvenster Assets (Middelen) en hergebruik het symbool in je andere ontwerpen.
8. Nog twee tekengebieden maken: Selecteer het gereedschap voor het tekengebied. Klik op de gewenste grootte voor het tekengebied. Doe dit twee keer.
9. Gebruik het selectiegereedschap om de elementen in het eerste tekengebied te slepen en te selecteren, klik op Repeat Grid (Raster herhalen) en sleep vervolgens de groene greep aan de rechterkant om de tekengebiedelementen in alle tekengebieden te herhalen. Zet je cursor tussen de tekengebieden en sleep de roze hulplijnen totdat de marge gelijk is aan de afstand tussen de tekengebieden.
10. Sleep drie afbeeldingen vanuit de Finder of Verkenner om de vormen te vullen.
11. Sleep een tekstbestand met drie regels voor de kopteksten om de plaatsaanduidingstekst te vervangen.
12. Deselecteer Repeat Grid (Raster herhalen) en selecteer vervolgens de optie opnieuw. Klik op Ungroup Grid (Raster degroeperen) om de verborgen inhoud op de extra tekengebieden weer te geven.
Een prototype maken:
1. Klik op het tabblad Prototype bovenaan.
2. Sleep een draad van het ene tekengebied naar het andere.
3. Klik op de knop Play (Afspelen) bovenaan om in Desktop Preview (Desktopvoorbeeld) het verloop te testen.
Dat is het. Ga voor meer informatie naar de pagina met zelfstudies voor Adobe XD.