Reference
Interface Design Shortcuts & Reference
Practical interface and product design notes worth revisiting
Typography
Limit your design to two typefaces maximum — one for headings, one for body.
Use font size contrast to establish hierarchy, not just bold weight.
Set body text between 16–18px for comfortable screen reading.
Keep line height between 1.5–1.8 for body copy and 1.1–1.2 for headings.
Avoid centering long paragraphs — left-align for better readability.
Layout
Use consistent spacing multiples (4px or 8px base) across the entire design.
Group related elements together and separate unrelated ones with whitespace.
Give content room to breathe — generous margins feel more premium.
Align elements to a grid, but don't be afraid to break it intentionally.
Use visual weight and proximity before adding borders or dividers.
Empty States
Never show a blank screen — always provide guidance or a call to action.
Use empty states to educate users about what will appear and how to get started.
Add a friendly illustration or icon to soften the emptiness.
Keep the message short, helpful, and action-oriented.
Design empty states for first-time users, search results, and error scenarios.
Forms
Use single-column form layouts for better completion rates.
Group related fields together and label each group clearly.
Mark optional fields, not required ones — assume most fields are necessary.
Disable the submit button until all required fields are valid.
Show progress indicators for multi-step forms.
Pre-fill fields when possible to reduce user effort.
Dashboard UI
Lead with the most important metric — don't treat all data equally.
Use cards to separate distinct data groups visually.
Choose the right chart type for the data — bar for comparison, line for trends.
Keep the sidebar navigation collapsed by default on smaller screens.
Design for scanning first, deep reading second.
Mobile App UI
Design for thumb reach — place primary actions in the bottom half of the screen.
Use native platform patterns unless you have a strong reason not to.
Keep the tab bar to 3–5 items for clarity.
Avoid modals that block the full screen without a clear dismiss action.
Test with real devices, not just design tool previews.
Use haptic feedback and micro-animations to confirm user actions.
UX Writing
Write like a human — avoid technical jargon in user-facing copy.
Keep error messages specific and helpful: say what went wrong and how to fix it.
Use verbs in button labels — 'Create account' not 'Account creation'.
Write empty state copy that guides, not apologizes.
Be consistent with terminology — don't use 'delete', 'remove', and 'trash' interchangeably.
Handoff to Developers
Name your layers and components clearly — developers read your file too.
Document spacing, colors, and typography as design tokens.
Provide responsive behavior notes, not just a single breakpoint.
Include interaction states: hover, focus, active, disabled, loading.
Use a shared component library to reduce miscommunication.
Walk through the design with the developer before handoff, not after.
Quick Design Check
Is the visual hierarchy clear at a glance?
Can users complete the primary action within 3 seconds?
Are interactive elements obviously clickable or tappable?
Does the design work on mobile without horizontal scrolling?
Is the typography readable at the chosen size and contrast?
Are empty, loading, and error states designed?
Is the spacing consistent throughout?
Does the color palette support accessibility (WCAG AA)?
Are labels and instructions clear enough without tooltips?
Would a new user understand the layout without explanation?