craiyon logo

A mobile UI for a Japanese language learning app, showing a flashcard for the Kanji '食' (taberu) with JLPT level navigation and 'Show Answer' button.

A mobile UI for a Japanese language learning app, showing a flashcard for the Kanji '食' (taberu) with JLPT level navigation and 'Show Answer' button.

Design a User Interface (UI) for a Japanese language learning website that is mobile-friendly and responsive, using a mobile-first approach. The main focus is an excellent user experience for modern smartphone users. The website is intended for Japanese language learners from JLPT N5 to N1, with core features including Kanji (flashcards), Bunpou (grammar), and personal Notes / Study Summaries. TARGET USERS: - Japanese language learners from beginner to advanced (N5–N1) - Self-learners who mainly use smartphones - Users who study in short, consistent sessions (microlearning) TARGET DEVICES: - Smartphone-first design - Design width: 360–390px - Layout must scale smoothly to tablet and desktop screens DESIGN STYLE & VISUALS: - Clean, modern, and minimalist - Light visuals focused on educational content - Flat design with subtle depth (soft shadows) - Consistent use of colors, typography, and icons - Professional, tidy, and easy-to-understand appearance TYPOGRAPHY & COLORS: - Modern sans-serif fonts (Inter, Poppins, SF Pro, or similar) - Clear and readable Japanese fonts for kanji and example sentences - Body text size: 14–16px - Clear visual hierarchy (headings, body, captions) - Color contrast meets accessibility standards - Light background with high-contrast CTA buttons UX PRINCIPLES: - Easy to use with one hand (thumb-friendly) - Simple, intuitive, and fast navigation - Important elements placed in the lower screen area - One main learning focus per screen - Large, rounded See more