UI-planning met Adobe XD ui-planning-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 prerequisites

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 what-you-will-build

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 standard-site-template-uikit

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 wknd-ui-kit

Stappen op hoog niveau:

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

Gefeliciteerd! congratulations

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 next-steps

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.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9