To test the latest code before jumping into the tutorial, download and install the latest release from GitHub. The finished reference site is another great resource to explore and see more of AEM’s out of the box capabilities. The tutorial covers the major development skills needed for an AEM developer but will not build the entire site end-to-end. Special thanks to Lorenzo Buosi and Kilian Amendola who created the beautiful design for the WKND site.Ī finished version of the WKND Site is also available as a reference: Over the course of the tutorial various pieces of the designs are implemented into a fully author-able AEM site. To make this tutorial closer to a real-world scenario Adobe’s talented UX designers created the mockups for the site using Adobe XD. Start the tutorial using a Site Template Adobe XD UI Kit Only available for AEM as a Cloud Service. Recommended for new projects and developers. Use a theming workflow to apply brand-specific styles and customizations with just CSS and JavaScript. Use out of the box components and templates to quickly get a site up and running. Start the tutorial with the AEM Project ArchetypeĪEM Site Templates - Also known as Quick Site Creation, a low-code approach to generating an AEM Site by using a pre-defined Site Template. The tutorial offers a deeper dive into AEM development. This is the recommended approach for AEM 6.5/6.4 projects and AEM as a Cloud Service projects that anticipate heavy customization. There are two basic approaches to starting an AEM Sites project.ĪEM Project Archetype - Traditional approach to AEM development by generating a minimal AEM project using a Maven template. Here’s the result and learnings from what I created … 1.Your browser does not support the iframe element. These are pure UI experiments testing the auto-animate feature, so please don’t judge the usability of these concepts ).ĭownloadable project files available at end of this article. I decided to take this new feature for a test drive and created a few experiments. Drag Gestures in XD takes the auto-animate feature one step further by allowing you to simulate the drag experience of touch-enabled devices. Deceptively simple to use, auto-animate creates stunning effects and transitions that help you communicate an animated end user experience. Designers can use auto-animate combined with drag gestures to create micro-interactions across art-boards for rich prototype experiences such as on-boarding flows, animations for carousels, cards and lists or progress indicators. Adobe recently announced their updated version of Adobe XD at Adobe Max in October and introduced a new feature called ‘Auto-Animate’.Īs Adobe describes it - Adobe XD has evolved from a basic click-through application to providing you divergent prototyping options such as Time, Tap, Drag, and Voice.