design

# Glide Layout & Design

## Screen Types

### Creating Screens

Click the "+" button in the Navigation or Menu section of the Layout Editor.

| Screen Type | Description | Use Case |
|-------------|-------------|----------|
| **Screen from data** | Collection screen linked to a table | Lists, directories |
| **Custom screen** | Blank screen to build freely | Dashboards, custom layouts |
| **Form screen** | Data entry form | Add/edit records |

### Sample Screen Templates

Pre-built templates for common patterns:
- **Project management** - Task tracking layout
- **Dashboard** - Overview with metrics
- **Company directory** - People/contacts list
- **Multi-Step form** - Wizard-style data entry
- **Chat** - Messaging interface

## Design Principles

Keep these in mind when building and reviewing screens:

- **Show don't hide** - Important data should be visible at a glance, not buried in detail views
- **Reduce clicks** - Can users accomplish tasks with fewer taps? Minimize navigation
- **Context matters** - Group related information together so users see what they need
- **Mobile vs Desktop** - Optimize for how the app will actually be used (phone-first usually)
- **Progressive disclosure** - Show overview first, details on demand

## Viewing Layouts for Design Review

When reviewing or building screens in the Layout Editor, **always switch to Desktop preview** unless specifically designing a mobile-only app.

### Switch to Desktop Preview

1. Look for the **device switcher** in the Layout preview toolbar (shows phone/tablet/desktop icons)
2. Click the **Desktop** icon to see the full-width layout
3. This reveals how components fill horizontal space and how multi-column layouts render

Mobile preview is narrow and hides important layout issues:
- Tables truncate columns
- Multi-column containers collapse
- Side-by-side layouts stack vertically
- Cards show fewer per row

### See Below the Fold

To review full page layouts:

- **Scroll the preview** - Drag or scroll wi