Open sanmishr opened 2 months ago
The following are different types pf pages for design system , this ticket is to analyze the variation and differnce between page types and components
Landing page: https://experience.sap.com/internal-fiori-design/ Home page: https://experience.sap.com/internal/fiori-design-web/ Why Design Guidelines?: https://experience.sap.com/internal/fiori-design-web/a-beginners-guide-to-the-design-guidelines/ Navigating the Guidelines: https://experience.sap.com/internal/fiori-design-web/get-started/ Best Practices for Designing SAP Fiori Apps: https://experience.sap.com/internal/fiori-design-web/best-practices-for-designing-sap-fiori-apps/ Learning Journey: https://experience.sap.com/internal/fiori-design-web/learning-journey/Two columns example: https://experience.sap.com/fiori-design-web/design-tokens/ Carousel + tables on column level example: https://experience.sap.com/fiori-design-web/theming/ Carousel on column level: https://experience.sap.com/internal/fiori-design-web/home-page/ Small cards example: https://experience.sap.com/fiori-design-web/morning-horizon/ Two columns: Image+Image or Image+Text examples: https://experience.sap.com/fiori-design-web/iconography-horizon/ Text+Image+Image example: https://experience.sap.com/internal/fiori-design-web/draft-handling/ Three columns + GIFs examples: https://experience.sap.com/fiori-design-web/motion-design/ Table with Do and Don’t, Images and checkmarks examples: https://experience.sap.com/fiori-design-web/ui-text-guidelines-for-sap-fiori/ https://experience.sap.com/internal/fiori-design-web/action-placement/#pagelevel-toolbars Text Box + Image + Image / 3 columns: https://experience.sap.com/internal/fiori-design-web/services/ You Tube embed: https://experience.sap.com/internal/fiori-design-web/sap-fiori-launchpad-spaces/ 2:1 Text vs Image columns: https://experience.sap.com/internal/fiori-design-web/title/ Quote and Information box on column level (cannot be done the same way because of the side menu) + icon and link examples: https://experience.sap.com/internal/fiori-design-web/generative-ai-design/ 3 Columns with links: https://experience.sap.com/internal/fiori-design-web/ai-design-roadmap/ Two-columns Guidelines boxes: https://experience.sap.com/internal/fiori-design-web/feedback-loop-in-intelligent-systems/ Beta tag in the title: https://experience.sap.com/internal/fiori-design-web/ai-colors/ Expandable / Collapsable menus: https://experience.sap.com/internal/fiori-design-web/ai-design-glossary/#1688593823644-fe45b55f-10fd 4 Images example: https://experience.sap.com/internal/fiori-design-web/placeholder-loading/ 3 columns, images + text: https://experience.sap.com/internal/fiori-design-web/dld-in-s4-hana-icd-and-dsc/ 404 Page: https://experience.sap.com/internal/fiori-design-web/table-features-sap-fiori-elements/
The following are different types pf pages for design system , this ticket is to analyze the variation and differnce between page types and components
Landing page: https://experience.sap.com/internal-fiori-design/
Home page: https://experience.sap.com/internal/fiori-design-web/
Why Design Guidelines?: https://experience.sap.com/internal/fiori-design-web/a-beginners-guide-to-the-design-guidelines/
Navigating the Guidelines: https://experience.sap.com/internal/fiori-design-web/get-started/
Best Practices for Designing SAP Fiori Apps: https://experience.sap.com/internal/fiori-design-web/best-practices-for-designing-sap-fiori-apps/
Learning Journey: https://experience.sap.com/internal/fiori-design-web/learning-journey/Two columns example: https://experience.sap.com/fiori-design-web/design-tokens/
Carousel + tables on column level example: https://experience.sap.com/fiori-design-web/theming/
Carousel on column level: https://experience.sap.com/internal/fiori-design-web/home-page/
Small cards example: https://experience.sap.com/fiori-design-web/morning-horizon/
Two columns: Image+Image or Image+Text examples: https://experience.sap.com/fiori-design-web/iconography-horizon/
Text+Image+Image example: https://experience.sap.com/internal/fiori-design-web/draft-handling/
Three columns + GIFs examples: https://experience.sap.com/fiori-design-web/motion-design/
Table with Do and Don’t, Images and checkmarks examples:
https://experience.sap.com/fiori-design-web/ui-text-guidelines-for-sap-fiori/
https://experience.sap.com/internal/fiori-design-web/action-placement/#pagelevel-toolbars
Text Box + Image + Image / 3 columns: https://experience.sap.com/internal/fiori-design-web/services/
You Tube embed: https://experience.sap.com/internal/fiori-design-web/sap-fiori-launchpad-spaces/
2:1 Text vs Image columns: https://experience.sap.com/internal/fiori-design-web/title/
Quote and Information box on column level (cannot be done the same way because of the side menu) + icon and link examples: https://experience.sap.com/internal/fiori-design-web/generative-ai-design/
3 Columns with links: https://experience.sap.com/internal/fiori-design-web/ai-design-roadmap/
Two-columns Guidelines boxes: https://experience.sap.com/internal/fiori-design-web/feedback-loop-in-intelligent-systems/
Beta tag in the title: https://experience.sap.com/internal/fiori-design-web/ai-colors/
Expandable / Collapsable menus: https://experience.sap.com/internal/fiori-design-web/ai-design-glossary/#1688593823644-fe45b55f-10fd
4 Images example: https://experience.sap.com/internal/fiori-design-web/placeholder-loading/
3 columns, images + text: https://experience.sap.com/internal/fiori-design-web/dld-in-s4-hana-icd-and-dsc/
404 Page: https://experience.sap.com/internal/fiori-design-web/table-features-sap-fiori-elements/