Making UI/UX Terms a Common Language
Creating great products requires designers, engineers, and directors to speak a "common language." This glossary aims to bridge that gap.
How to Use This Tool
- Requirements Definition & Wireframing: Using specific names like "accordion" or "toast" prevents misunderstandings.
- AI Prompts: Specifying accurate UI part names to image generation AI or coding AI helps get the desired output.
- Smoother Design Reviews: Using professional terminology instead of abstract descriptions improves feedback quality and speed.
Implementation Features
Designed not just as a list, but as a learning tool.
- Dynamic Rendering: Data is generated dynamically using JavaScript, making future additions easy.
- Instant Filtering: Find terms instantly by searching Japanese, English, or descriptions from the header search bar.
- Safe Sample Previews: Samples are isolated in iframes to check behavior without affecting the main site.
Useful Knowledge
Basic knowledge of human psychology and principles behind UI design.
- Mental Models: User assumptions that "it should work like this." Following known UI patterns (like hamburger menus) lowers learning costs.
- Affordance: The shape itself suggests "how to use it." For example, a shadowed button is perceived as "pressable."
- Fitts's Law: The bigger and closer the target, the easier it is to hit. Important buttons should be large and placed in easy-to-reach locations.