UI-planning met Adobe XD

In de meeste gevallen begint de planning voor een nieuwe website met modellen en statische ontwerpen. Adobe XD is een best-in-klasse ontwerphulpmiddel om gebruikerservaring op te bouwen. Adobe raadt u aan uw Sites-implementatie te plannen met behulp van UI-modellen voor het gebruik van Adobe XD of een ander hulpprogramma.

Vereisten

Dit is een meerdelige zelfstudie en er wordt van uitgegaan dat de in het vorige hoofdstuk beschreven stappen zijn voltooid. Dit hoofdstuk is gewoon een 'watch & learn'-gedeelte. Er is geen actie vereist om verder te kunnen gaan met volgende hoofdstukken.

Als u de gewenste video's wilt volgen Adobe XD geïnstalleerd, een gratis proefversie beschikbaar.

Doelstelling

1. Bekijk de door de Standaardsitesjabloon en door het WKND-ontwerpteam.
2. Begrijp hoe de kits UI kan worden gebruikt om een implementatie van AEM Sites in kaart te brengen en te plannen.
3. Leer hoe u in Adobe XD gemaakte UI-ontwerpen kunt afleveren aan een front-end ontwikkelaar voor implementatie.

Wat u gaat maken

In dit hoofdstuk worden twee Adobe XD-bestanden geïnspecteerd, één voor de Standaardsitesjabloon en een andere voor de voorgestelde WKND-site. De

UI-kit voor standaardsitesjabloon

Stappen op hoog niveau:

1. Download de Standaardsitesjabloon XD bestand.
2. Inspect the UI Kit in Adobe XD.
3. Simuleer het afleveren van de ontwerpen aan een front-end ontwikkelaar.

WKND-UI-kit

Stappen op hoog niveau:

1. Download de WKND-XD.
2. Inspect the designs for the WKND Article template.

Gefeliciteerd!

Gefeliciteerd, u hebt geleerd hoe de Uitrustingen van UI van Adobe XD kunnen worden gebruikt om een implementatie van AEM Sites in kaart te brengen en te plannen.

Extra UI-kits zijn beschikbaar om te inspecteren en te downloaden.

Volgende stappen

In het volgende hoofdstuk wordt een nieuw paginasjabloon gemaakt op basis van het ontwerp van het WKND-artikel.

Leer maken en wijzigen Paginasjablonen. Begrijp de verhouding tussen een Malplaatje van de Pagina en een Pagina. Leer hoe u beleid van een paginasjabloon configureert voor korrelig beheer en consistentie van merken voor inhoud. Een goed gestructureerde sjabloon voor artikel van het tijdschrift wordt gemaakt op basis van een model van Adobe XD.