# Mobile UX / Wireframing Guide

Use this guide when creating high-quality iOS mobile UX mockups in this folder. This is the UX and wireframing layer only: layout, hierarchy, navigation, interaction states, information architecture, and native mobile behavior. Save color, brand expression, illustration style, and final visual polish for a later UI guide.

## Core Goal

Mobile mockups should feel like real iPhone app screens, not responsive web pages squeezed into a phone frame.

Prioritize:

- Native iOS structure and spacing.
- Clear job-to-be-done flow.
- Realistic controls, states, and content density.
- Grayscale or low-color treatment for wireframes.
- Screen-to-screen consistency.

Avoid:

- Web-style cards stacked inside cards.
- Marketing-page hero sections.
- Oversized buttons or desktop-like panels.
- Decorative elements that do not support the workflow.
- Text explaining how the UI works inside the app screen.

## Frame And Canvas

Use a realistic iPhone wrapper for HTML mockups.

- Target an iPhone Pro-sized frame such as `393 x 852`.
- Center the device on the page.
- Ensure the frame fits inside the browser viewport with no page-level overflow.
- Include iOS status bar, dynamic island when appropriate, and home indicator.
- Keep app content inside the phone screen; only the wrapper should feel like hardware.
- For standalone HTML files, the page should immediately open into the mobile frame.

Recommended frame behavior:

- Use `aspect-ratio: 393 / 852`.
- Use `width: min(393px, calc(100vw - 24px), calc((100vh - 24px) * 393 / 852))`.
- Keep the phone screen `overflow: hidden`.
- Put scroll behavior inside the app content area, not the browser page.

## Native iOS Structure

Favor iOS-native composition:

- Status bar.
- Navigation bar or top affordance row.
- Large title for primary screens.
- Optional search field under the title for list/history screens.
- Grouped controls or grouped lists.
- Bottom tab navigation for core app sections.
- Home indicator.

Large title screens should use:

- A large screen title around `34px`.
- Native top spacing below the nav/status area.
- Short supporting copy only when it helps orientation.
- Section labels for grouped content.

Do not use a desktop/web header pattern with a logo block, large hero copy, and a card grid unless the app explicitly needs that.

## Navigation

Use app-native navigation patterns.

Bottom tabs:

- Use for top-level destinations such as Home, History, and Settings.
- Active tab should be visually distinct but not oversized.
- Keep tab labels short.
- Use icon plus label.
- For modern iOS/Liquid Glass-style mockups, make the tab bar a floating rounded capsule above the home indicator.
- The floating footer should have left/right inset, rounded ends, translucent material, and individual active state treatment.

Navigation bars:

- Use simple icon buttons for back, more, search, or notifications.
- Avoid putting large decorative buttons in the nav area.
- Keep tap targets around `34-44px`.
- If a screen does not need a back action, do not force one.
- Back chevrons need enough drawing room inside the tap target. Do not draw the stroke flush against the icon box edge; use an inset chevron inside a wider box so it never appears clipped.
- Pair a back chevron with the previous screen title when the hierarchy benefits from context, such as `History`.

Screen links:

- In multi-file HTML mockups, tab items should be anchors linking to the related HTML file.
- Keep the active tab correct per page.

## iOS Materials And Wireframe Styling

For grayscale UX mockups, use native material cues without over-designing.

Classic iOS grouped style:

- Light system gray screen background.
- White grouped containers.
- Thin separators.
- Rounded grouped sections around `16-20px`.
- Subtle shadow only if needed.

Liquid Glass-inspired wireframe style:

- Translucent floating panels.
- Backdrop blur.
- Soft inner highlights.
- Hairline glass borders.
- Layered depth through shadows.
- Floating rounded footer menu.

Keep Liquid Glass subtle in wireframes. The UX should still read clearly in grayscale.

Good grayscale material tokens:

- Screen: `#f2f2f7`.
- Label: `#111111`.
- Secondary text: `rgba(60, 60, 67, .64)`.
- Separator: `rgba(60, 60, 67, .16)`.
- Fill: `rgba(118, 118, 128, .12)`.
- Glass panel: `rgba(255, 255, 255, .50-.70)`.

## Early UI Direction Notes

This guide is primarily for UX and wireframing, but the Summarai mockups now have an early visual direction worth preserving for future iterations.

Slate Reader palette:

- Screen/background: `#EEF1F4`.
- Text: `#121820`.
- Secondary text: `#66717D`.
- Copper accent: `#B86B3C`.
- Supporting slate: `#6E8796`.
- Soft accent: `#EFD8CA`.
- Glass panels: translucent white over the cool slate background.

Use the palette with restraint:

- Keep large surfaces cool and quiet.
- Use copper for primary actions, selected states, important metrics, reading highlights, and video/source accents.
- Use supporting slate for secondary emphasis, summary headings, and content media treatments.
- Avoid turning every component copper.
- Preserve iOS-native spacing and hierarchy before adding color.
- Liquid Glass effects should feel like material and depth, not decoration.

For Slate Reader + Liquid Glass:

- Floating footer: translucent rounded capsule with subtle border, blur, and active item glass fill.
- Cards/groups: translucent white panels with thin light borders and soft inner highlights.
- Video thumbnails: slate gradient base with a restrained copper highlight.
- Quote/highlight areas: soft copper wash, not a saturated block.
- Primary button: copper gradient or solid copper with subtle depth.

## Layout And Spacing

Use mobile-native density.

- Outer content padding: `16px` is a good default.
- Group corner radius: `16-20px`.
- List row height: usually `72-96px`, depending on content.
- Search field height: around `36-38px`.
- Segmented control height: around `32px`.
- Compact primary actions: around `34-44px`, depending on context.
- Bottom tab bar height: around `60-84px`, with the home indicator below it.

Avoid:

- Too much empty vertical space.
- Desktop-sized hero layouts.
- Cards with large margins and heavy borders.
- Nested cards inside cards.
- Buttons that dominate the screen without reason.

## Forms And Inputs

Inputs should feel native.

For a primary paste-link flow:

- Use a grouped form section.
- Put the service/source icon on the left when helpful.
- Use a label and placeholder.
- Keep the action close to the input.
- Add a short status/help line if it sets expectations.

Input row pattern:

- Left icon.
- Label above value/placeholder.
- Native text size around `16px`.
- Separator between input row and action row.
- Compact action button on the trailing side or below when needed.

Do not make the input look like a desktop search bar unless it is actually search.

## Lists And History Screens

History, saved items, and settings should use grouped list patterns.

Good history screen structure:

- Large title.
- Search field if the list can grow.
- Segmented control for major filters.
- Optional summary/activity metrics.
- Grouped list section with native rows.
- Row thumbnail or icon.
- Title, detail text, metadata.
- Disclosure chevron for drill-in.

List rows should:

- Use separators inside the group.
- Avoid separate bordered cards for every row unless the product style requires it.
- Have realistic item text.
- Keep metadata compact.
- Support scanning.

## Summary And Result Areas

For AI output or generated content:

- Reserve a clear preview/result area.
- Show a useful empty state before generation.
- After generation, show realistic summary structure.
- Include metadata such as original video length, read time, and key points.
- Use short bullets or takeaways.

Empty states should:

- Be calm and compact.
- Explain what will appear, not how the product works in detail.
- Avoid large illustrations in early UX wireframes.

Generated states should:

- Replace the empty state.
- Update status text.
- Avoid layout jumps that break the screen.

## Detail Screens

When a user taps into a saved item, prototype the inner/detail page as a real destination, not just a modal or expanded row.

Good detail screen structure:

- Status bar and navigation bar.
- Back affordance that returns to the parent list.
- Optional more/action button.
- Hero or source preview for the selected item.
- Title and concise description.
- Metadata row for original length, read time, key points, or similar.
- Structured summary content.
- Key takeaways.
- Optional highlighted quote or source note.

For generated video summaries:

- Prefer a structured `Overview` with bold subsection headings and bullet points.
- Each subsection should communicate one major idea from the video.
- Use bullets for supporting details, implications, or evidence.
- Keep `Key Takeaways` as a separate scannable section.
- Do not include a `Chapters` section by default. Add chapters only if navigation by timestamp is a core product behavior for that screen.

Detail pages should feel optimized for reading:

- Use generous line-height for titles and body text.
- Avoid cramped heading rows.
- Keep paragraphs short.
- Use grouped glass/native sections for content blocks.
- Do not place the floating tab bar on deeper drill-in screens unless it is intentionally persistent in the product model.

## Interaction States

Wireframes should still include core states.

For the Summarai home flow:

- Empty summary state.
- Missing-link state.
- Processing state.
- Ready/generated state.

For navigation:

- Active tab state.
- Correct page title.
- Link between Home and History.

For filters:

- Active segmented control state.
- Inactive segment states.

## Content Quality

Use realistic content. Placeholder text makes mockups feel shallow.

Examples:

- Better: `How AI changes knowledge work`.
- Worse: `Video title goes here`.

Use concise, product-relevant copy:

- `42 min video summarized into a 3 min read`.
- `Transcript-backed summary with 12 key points`.
- `A summary usually takes less than a minute`.

Do not add visible instructional copy like:

- `Click here to generate`.
- `This is where the summary will go`.
- `Use this footer to navigate`.

## Icons

Use familiar app-icon metaphors:

- Home: house.
- History: clock.
- Settings: gear.
- Search: magnifier.
- More: ellipsis.
- Back: chevron.
- Video/YouTube: play shape in a rounded rectangle.

For early HTML mockups, CSS-drawn icons are acceptable if simple and consistent. In production app mockups, prefer the platform icon system or a consistent icon library.

## Validation Checklist

Before calling a mobile UX mockup done:

- The screen fits inside the iPhone frame.
- There is no browser-level horizontal or vertical overflow.
- The active tab is correct.
- Footer does not overlap the home indicator.
- Content does not hide behind the footer.
- Text fits inside controls and rows.
- Large titles and navigation headers are not clipped by the phone chrome, dynamic island, or tight line-height.
- Back chevrons and other CSS-drawn icons have enough inset space and do not look cut off.
- The screen feels like native iOS, not a webpage.
- Empty and populated states are represented where relevant.
- Navigation links work between mockup pages.
- Console has no errors.

## Summarai-Specific Patterns

Home:

- Large title: `Summarai`.
- Primary job: paste a YouTube link.
- Grouped input section.
- Compact generate action.
- Summary preview area visible on the same screen.
- Empty, processing, and ready states.

History:

- Large title: `History`.
- Search field.
- Segmented filter: `Recent`, `Saved`, `Unread`.
- Activity metrics.
- Grouped list rows for summarized videos.
- Disclosure chevrons for detail navigation.

Summary detail:

- Back link to `History`.
- Video/source hero.
- Title: selected video name.
- Metrics: original length, read time, key points.
- Structured overview with bold headings and bullets.
- Key takeaways as a separate grouped section.
- Optional highlighted quote.
- No chapters unless timestamp navigation becomes a core requirement.

Footer:

- Top-level tabs: `Home`, `History`, `Settings`.
- Floating rounded glass capsule for modern iOS direction.
- Active tab should be visible but not heavy.
- Keep the footer above the home indicator.

## What Comes Later In UI Direction

Do not solve these in the UX guide:

- Brand color palette.
- Final typography system beyond iOS-native sizing.
- Illustration or imagery style.
- Motion design.
- Final Liquid Glass shader/refraction detail.
- App icon or logo design.

Those belong in a separate UI/visual-design guide once the product direction is clearer.