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 de implementatie van Sites te plannen met behulp van UI-modellen voor het gebruik van Adobe XD of een ander gereedschap.

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 video's wilt volgen die u nodig hebt 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. The

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 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.

Op deze pagina