From Design to Build:
Utilizing Adobe XD Tools to Target Digital Designs for Adobe Experience Manager Web Sites
5th Aug 2020
From Design to Build:
Experienced digital designers understand the importance of creating designs that are not just user-friendly, but also developer-friendly. The key is to have atomic/modular design begin at the design level, rather than having developers trying to create that pattern after the designs are completed — a huge step in usability for everyone involved. For this step forward to happen, designers need to have clarity into how a design is broken up into configurable templates and components to create a design system.
Adobe is making inroads in bridging the gap between designs that are user-friendly and developer-friendly, at least in context of Adobe Experience Manager (AEM). How? Through tools in Adobe XD that help user experience (UX) and user interface (UI) designers produce effective, on-brand-designs without compromising a content author’s ability to build those pages. A designer using the Adobe XD UI kit for AEM can ensure they’re using building blocks already available in AEM, which allows for a more sustainable developer workflow and also allows authors to maintain those designed pages with ease.
How to bridge the “design to build” gap
Adobe Experience Manager (AEM) is built to support content authoring velocity, streamlining an author’s ability to create or update pages without developer assistance or new component creation. Atomic design and development patterns assist with this by allowing the authors to have a flexible suite of smaller content pieces they can combine into unique pages. When this is done effectively at both the design and development levels it gives authors a wealth of dynamic and reusable modular components at their fingertips, opening up a variety of layout and content options without the need for individual development cycles.
At Isobar, we focus on this a great deal from both design and development perspectives. In fact, our development standards almost require some form of atomic design as a component driven front-end thrives on taking reusable building blocks to create larger UI experiences. Still, doubling down on our focus from a UX and UI design standpoint would only be beneficial for development efforts and visual consistency.
Designing Core Components
In out-of-box AEM, core components (https://www.aemcomponents.dev/) represent the strongest set of immediately configurable components available. Having UX designers incorporate these pre-built and highly configurable components can drastically reduce the time needed to build out new pages. This effect is even more noticeable on freshly started AEM projects, as no custom development work has been done at the component level.
As well, AEM’s style system, which lets authors apply different design treatments to the same configuration of components, lends itself to utilizing a pattern library, or design system framework.
In Adobe XD, designers can now design for the out-of-the-box AEM core components, and consider how different styles can be implemented via AEM’s style system.
This results in content authors being able to preview the different customizations and visual treatments for each AEM component exactly as a designer intended. Having this single, shared visual library aims to reduce unnecessary design deviations that require development efforts and to ensure design, UX, and cascading style sheets (CSS) consistency between all available components
Design Policies for Authors
When building layout containers via AEM CMS authoring, a set of configurable policies can be applied to each container. These policies can control which components are allowed to be added into certain sections of the layout container, for example only allowing a hero banner to be added at the top of the page. Policies can be more granular than simply filtering the list of addable components, defining content requirements and limiting visual variation options
Determining policies during the UX design phase of a project greatly helps to keep content authoring and UX/UI design in sync, and assists in new page creation as the list of appropriate visual treatments for a single layout has been streamlined
Use the Right Tool For the Job
Designing digital experiences has come a long way from when designers comped up web pages in Photoshop. There are a number of robust tools available to designers these days including InVision, Zeplin, and Sketch.
However, by using Adobe XD to design Adobe Experience Manager sites, designers can utilize UI kits for XD that provide in-app design sources for the out-of-box AEM component library, allowing UX designers to utilize those pre-existing components with ease and to recognize when an AEM out-of-box component could take the place of a custom developed component.
Customizing these core components to match a project’s visual guidelines creates a set of re-usable, out-of-box, branded UI building blocks that streamlines the design process for full pages. To gain more insight into how Isobar marries atomic design and AEM development to create a core set of components in some of our previous projects, check out this National Car Rental case study and this RLI case study. Contact us to learn more.