Speak Dev

Master UI/UX vocabulary

Stop Winging Design Briefs

Learn the vocabulary devs actually use—so your vision gets built right the first time.

The Problem: You have a clear vision in your head, but when you try to explain it to developers or AI tools, things get lost in translation. You end up with generic layouts, mismatched styles, and endless revision rounds. The issue? You don't know the right terms.

1. Learn the Vocabulary of Modern Web UI

If you want your requests to land, you need to speak the same language as devs and product people.

🏗️ Layouts & Structures

  • Dashboard layout
  • Hero section
  • Split-screen layout
  • Masonry grid
  • Z-layout / F-layout
  • One-page / SPA

🎨 Design Systems & Styles

  • Material Design (Google)
  • Fluent (Microsoft)
  • Neumorphism
  • Glassmorphism
  • Brutalism
  • Neo-minimalism
  • Claymorphism

⚡ Micro-interactions

  • Hover states
  • Animated loaders
  • Skeleton screens
  • Sticky navbars
  • Infinite scroll
  • Ripple effects

2. How to Ask for What You Want

Be specific and structured when briefing devs or AI tools.

1

Layout

"I want a split-screen hero layout with left text and right illustration."

2

Style

"Use glassmorphism for cards, with blurred backgrounds and soft shadows."

3

Tone

"The vibe should be brutalist but modern—big typography, black/white, no gradients."

4

Interaction

"Hover states must scale images up by 5%, buttons should have ripple effects."

5

Reference

"Follow the structure of [this Behance shot] or [this Dribbble link]."

3. Where to Learn the Names

Stay sharp by exploring these resources for UI patterns and trends.

📱

Mobbin.design

UI patterns from top apps with clear naming conventions.
🎨

UI8.net

Premium kits showing professional naming standards.
🏀

Dribbble

Trendspotting vocabulary from top designers.
🎭

Behance

Case studies with detailed design explanations.
🏆

Awwwards

High-end site designs with style labels.
📖

Refactoring UI

Steve Schoger's guide to describing visuals clearly.
🎯

Material Design

Google's tokens and style guide vocabulary.
💎

Fluent Design

Microsoft's design system with clear terminology.

4. Quick Hack for Communication

When in doubt, use this foolproof method.

The Screenshot Method

1
Screenshot + Circle Elements Take screenshots of inspiration and annotate with arrows or circles.
2
Label with Keywords Add labels like "masonry grid," "hero section," "CTA button, ghost style."
3
Share 2-3 Inspiration Links Provide reference links that nail the exact feel you're going for.
4
Say What You Don't Want Be explicit about what to avoid—this saves massive revision time.

Ready to Stop Guessing?

Get instant access to a visual cheat sheet with examples of every UI pattern, style, and interaction—so you can point and shoot when briefing.

Get the Cheat Sheet →