Make the Dream Team Hand-Off in Designing for AEM a Reality

Designing for AEM.

Adobe Stock / WavebreakMediaMicro

Many of us are already familiar with the design process where every single page layout is created before development starts – where we can view the final look and feel of the entire site down to every device breakpoint. This, however, can pose a challenge for both content authors and developers in understanding how these design comps are used to reference specific components and templates for Adobe Experience Manager. Launching a full AEM site is a marathon race, and the first leg starts with establishing an effective UX approach.

What is the template and component breakdown? How does the development team know where to start?

We know business expectations will evolve – more content will be added, type will be edited, and images will be replaced. Our design needs to be flexible so the development approach can remain agile as content is modified by authors. Managing UX deliverables that outline this process is key for effective designer and front-end developer collaboration, and setting up your future development sprints for success.

Design deliverables

Whether you call it a pattern library, design system, or component guide, the holistic theme is the same: breaking down your design layouts into UI elements while outlining global standards and guidelines. A component guide is key in establishing consistency in visuals and encouraging modular development, which coincides with atomic design methodology. In many cases, global brand elements such as typography, colors, patterns, and types of imagery are already managed by the brand team, so make sure your AEM site follows what’s already been established to maintain brand consistency.

Your front-end developer will use this to start creating global variables or mix-ins that can be easily referenced within component specific code. It’s also a chance for them to start structuring client lib folders for staging global assets such as font files, iconography, and logos.

Responsive strategy

Knowing your mobile plan is a good start for determining your grid system and breakpoints. Gathering your traffic and target audience data from your Analytics team can help guide your requirements for accessibility and browser support. One example is where our team had a pharmaceutical client whose employees primarily used tablets in their day-to-day routine. We found an adaptive mobile interface to be an effective approach. Users were looking for different content, based on if they were on their phone placing quick sample orders, or doing more extensive research while sitting at a desktop. Once establishing your responsive strategy, setting up your grid system is key for keeping templates layouts and components’ consistency aligned. Your front-end developer will use these grid system standards to set up a base responsive framework and guide development for your Layout Container component in AEM.

UI interactions

Be sure to cover your UI interactions specs for elements such as button hover states, active states, menu opened or closed displays, toggles, modals, etc. Are there elements that may require using a device’s native feature such as pinch, zoom, or swiping? Some of this may carry back to your responsive strategy and help your front-end developer to determine setting up touch-friendly support libraries such as Modernizr or JQuery UI.

_Besides global standards, be sure to include detailed functional specs for each component. Our Adobe Business Consulting UX team prefers to use _Adobe XD CC for all our prototyping and spec document creation.

Author options

Besides following your already established brand design guidelines, consider how individual components will be used by content authors and end users alike. Designing your component for content authors requires a level of predictability — exploring various use cases in how it will be modified. Ask yourself these questions:

These requirements are both helpful for enabling your content authors to have more flexibility in how they use components on a page, and give your front-end developers the information they need to test their code for these variations. Knowing where dynamic vs. static content is used can also be helpful in identifying where third-party code can be used such as social media applets, Google Maps APIs, or gallery lightboxes.

Component consolidation

Component consolidation is a good exercise in maximizing component adaptability and minimizing development effort. Consider how design elements work with one another — is a component restricted to specific content or specific templates, or could a few elements be modified so it could be more flexible? Could the component be stripped of certain elements to avoid redundancies and reduce development time? Related components may be able to have design features tweaked to achieve the same business goal as one component, instead of three.

Here we simplified a design to use one component, where the author adds content for either a pre-title, headline, or paragraph copy, and can toggle between three layout variations — all achieved through careful consideration for CSS and HTML set-up.

AEM 6.4 (and the AEM 6.3 feature pack) has a Style Configurator feature that allows the author to select a different style option in the component configuration tool. This is set up by giving the author a CSS class name that is applied to the component container div and triggers the corresponding CSS that changes the component layout. This does require use of the Layout Container component in order to work.

Our Adobe Business Consulting UX team custom-tailors workshops to help you streamline your design workflow to better align for AEM and meet your business goals. Whether you’re new to designing for AEM or looking to optimize your internal processes, let us help you design a plan and guide you to a successful web launch.

The end goal is the ability for your content authors and developers to be able to look at your design layouts and know how they will be structured for Adobe Experience Manager. The best way to maximize the value of your design effort is a clear delivery of how it can be flexible and adaptable for all your business needs. Help your developers find their happy place too, through collaborating — between your UX team, your content authors, and developers alike — in the intention behind all of your UX design decisions.