10/21/2020

AEM Design - Page Design from mockups and wireframes

 AEM Design Concepts:

How do you design AEM Pages?, where to Start

How do you identify the Templates , Components, Initial Content etc.

AEM Page Structure

-Describe the basic Structure of the AEM Page

-Identify Templates and components in a Page

1) AEM Page is an instance of a Template where components render the actual content

2) Templates define the basic structure of a Page

3) Templates Specify the components used within the selected Scope

4) Components are re-usable modular units that determine specific functionality to display content on page

It is better to start work on Templates and Components after approved design or mock ups / wireframes

Template and Component identification depends on the Business requirements / wireframes / mockups

Deconstructing wireframes - to identify the structure - Separate Header, Footer and Body sections of the page

Examine all pages - and identify the STRUCTURAL similarities

Pages have different content may have SAME Template


while deconstructing the page - you have to consider - Ownership of the Template and ownership of the Page

Developer / Technical - responsible for Template design and development 


The content authors are responsible for creating page using Template

Developer should provide flexibility and appropriate number of Templates for different pages

Once the UNIQUE Templates are identified - developer has to identify the Fixed components like Logo, Top Navigation, Header and Footer 

Also identify the INITIAL content on pages

Once developer identify the Unique Templates and Fixed Components , Initial Components, Initial Content - you have to identify REUSABLE components

which can be used on the pages

Based on the requirement - you can use OOB components, customize OOB Components or write complete Custom Components


No comments:

Post a Comment