UI Architecture

Next

Page Objects

Page

Made-Up-Of

Contains

  • A Page Template

Page Templates

Made-Up-Of Either

  • No-Rail Template
  • Rail Tempale

Contains

  • A Page Type

Page Types

Define

  • The context of the page within the site hierarchy
  • The semantic meaning of the page purpose
  • The mandatory and optional UI components that make-up the page

Examples

  • Landing, Gateway
  • Category, Results
  • Detail, Article

UI Components

Define

  • The semantic meaning and purpose to sub-components
  • The encapsulation boundries that allow for resuability across web pages
  • Contain style, layout, and behavior rules across form factors
  • Attributes that allow for extensibility of UI components

Examples

  • Header, Footer
  • Navs - Secondary, Tab
  • Rails - Filter, Aside
  • Cards - Product, Link
  • Panels - Address, 3up