FLOW :: UX Design -> UI -> Surface => Django Template Prep

[iPoetDev]

FLOW: From UX -> UI -> Surface => Django Template Prep:

Document: Developer Practice

5 Stages of UX Design

Source: The 5 elements of UX design explained

Implementing Last 3 Stages:

1. Structure
2. Skeleton
3. Surface

The other 2

• Strategy: Covered by the presumption of the opening sections of the Readme. For this scale of this project, while strategy is not a large component, it is addressed in short form, and not by in depth UX techniques and practices.
• Scope: Covered by the Scope and Plan sections of the Readme.

Project UX Workflow

1. Structure: To implement the User Experience via Structure: (Site Structure, Internal Django App logical organisation, Information Architecture, Interaction and flow Chart user journeys)
2. Skeleton: To Implement the User Experience via Skeleton: (Wireframes, On Page Navigation, Other page components and content areas, HTML Semantics, Django Templates and Includes, Tailwind CSS Layout)
3. Surface: To implement the User Experience for the page surface: (Tailwind Utility CSS, Page composition and responsiveness, Appearance's Look and Interactivity)

Structure

Per whole site

• IA: Information Architecture
  • User Journey and User Stories.
  • Information Organisation as delegated to Django Apps
    • Core App: Public & Private Home Page, User Forms & User Verification
    • Account App: Account User profile and settings
    • Dash App: Report and Inform Dashboard app reading from GitHub API
    • Do App: Do, Tasks and Actions App mutating via GitHub API
  • Sitemap and Django urls.py per site and per app.
• Interaction
  • HTTP Requests Errors and Messages
  • Form Interactions and Messages
  • Email (ex site) interactions and verification
  • Alerts and User Feedback

Skeleton

Per page / code unit

'Structural CSS'

• Page Layout: Block display, container, width/height, margins, and large canvas layout etc
• Page Composition: Flexgrid, Display, Breakpoints/Responsiveness, Spacing, Depth etc

Workflows

• Create: HTML Page Master templates for design and styling.
  • A. page.html: HTML Page Master for a base html template.
  • B. inner.html: HTML Page Master for private only inner template for authenticated app pages.
  • C. simple.html: HTML Page Master for all uses: simple pages, dead end and error pages.
• Create: Page variants for html variants per use case and page access state.
  • 1. index.html: Public & Private: Public index.html and Private index.html in one - Uses: page.html
  • 2. verify.html: Public: Email verification following user signing/registration - Uses: simple.html
  • 3. account.html: Private: Django app account page - Uses: inner.html
  • 4. dash.html: Private: Django app dash page - - Uses: inner.html
  • 5. do.html: Private: Django app do page - - Uses: inner.html
• Port to Django Templates and Includes
  • 1. Create the Page Master
  • 2. Defined the page sections, page components, design blocks etc (Exclude Start --> Exclude End)
  • 3. Extract these into Django Include HTML as pure HTML.
  • 4. Add based styles for page layout and composition.
  • 5. Add DTL syntax as needed
  • 6. Adjust page or include styles as needed.

Surface

Per page composition | Page to Device Responsiveness | Theming and Appearance | User Interactivity

• Uses: TailwindCSS as core Utility frameworks
• Uses: AlpineJS, potentially, to supplement more client side interactivity
• Maybe: Used: Tailwind Elements as a Design System (porting Bootstrap components into Tailwind's framework and syntax)

Workflow under development.

Sources

• The 5 elements of UX design explained