## Why UI/UX matters Good UI/UX means users can complete the important thing in your app quickly and confidently. It is less about visual effects and more about clarity, speed, and fewer mistakes. ## Mini TOC - [Why UI UX matters](#why-ui-ux-matters) - [Quick Link Cards](#quick-link-cards) - [What good UI UX means](#what-good-ui-ux-means) - [Make your app feel faster](#make-your-app-feel-faster) - [Mobile friendly by default](#mobile-friendly-by-default) - [Which React UI library should you choose](#which-react-ui-library-should-you-choose) - [Quickstart shadcn ui](#quickstart-shadcn-ui) - [Steal this 45 minute UI plan](#steal-this-45-minute-ui-plan) - [Link summary and free vs paid snapshot](#link-summary-and-free-vs-paid-snapshot) ## UI/UX Libraries & Inspiration ### Quick pricing reality check **For most students: use shadcn/MUI/Chakra/Radix freely; treat Mobbin/Pttrns as optional inspiration, not required tools.** - Free and open source: `shadcn/ui`, `MUI Core`, `Chakra UI`, `Radix UI`. - Free to read/share: the article links above. - Mostly free browsing: `UI-Patterns.com`. - Freemium/paid for full access: `Mobbin`, `Pttrns`. ## What good UI UX means For student projects, the basics win: - Clear hierarchy. - Consistent spacing. - Strong contrast and readable text. - Accessible forms and buttons. If you only have 2 hours, do this first: - Keep one layout system across all pages. - Use one primary button style and one secondary style. - Make every input labeled and every error message actionable. ## Make your app feel faster Use these immediately: - Reduce steps in the main flow. - Show skeletons/spinners instead of blank pages. - Add empty and error states. - Test on a small laptop and a phone viewport. Quick pre-submit checklist: - Can a new user finish the main flow in under 30 seconds? - Is there one obvious main action per screen? - Do key screens handle loading, empty, and error states? - Is everything readable and tappable on mobile? ## Mobile friendly by default - Start from a mobile layout. - Use a single-column layout on small screens. - Keep tap targets large. - Avoid tiny text and crowded forms. Reliable patterns: - Bottom navigation for major sections. - Sticky primary action button for the next key step. ## Which React UI library should you choose ### shadcn/ui Use this if: - You like Tailwind. - You want full control over component code. - You want to move fast without losing customization. ### MUI Use this if: - You need many components quickly. - You want mature docs and ecosystem support. - You are okay with opinionated defaults. ### Chakra UI Use this if: - You want an easy API for your team. - You care about accessibility from day one. - You want fast setup with clean theming. ### Radix UI Use this if: - You need primitives, not full styled kits. - You are building your own visual system. - You want highly reliable interaction behavior. If you are unsure, default to `shadcn/ui` (if you like Tailwind) or `Chakra UI` (if you do not). ## Quickstart shadcn ui You can literally copy-paste this into a new Next.js app and have a solid starter UI. Do not forget: run this in your terminal at the project root. If the CLI complains about Tailwind, check: https://ui.shadcn.com/docs/installation ```bash # 1) Create a Next.js app npx create-next-app@latest student-ui-kit cd student-ui-kit # 2) Set up TailwindCSS v3 (if not already set) # 3) Initialize shadcn/ui npx shadcn@latest init # 4) Add a button component npx shadcn@latest add button ``` ```tsx // app/page.tsx import { Button } from "@/components/ui/button"; export default function Page() { return (

Your Product Name

Keep the first screen focused on one action.

); } ``` ```tsx // app/components/ResultState.tsx export function ResultState({ loading, error, items, }: { loading: boolean; error?: string; items: string[]; }) { if (loading) return

; if (error) return

Something broke. Try again.

; if (!items.length) return

No results yet. Add your first item.

; return (

{item}

); } ``` ## Steal this 45 minute UI plan > **Steal this 45-minute UI plan** > > 1. **10 min:** define your primary flow in one sentence. > 2. **15 min:** scaffold key screens with one UI library. > 3. **10 min:** add loading, empty, and error states. > 4. **10 min:** mobile check and tighten spacing, text size, and CTA clarity. ## Link summary and free vs paid snapshot Bookmark or screenshot this for later. ### UI/UX principles and best practices - Concepts: UXPlanet - https://uxplanet.org/7-concepts-every-ui-ux-designer-should-know-in-2025-accea5d71b06 - Practices: Vertigo - https://vertigogrp.com/10-ui-ux-design-best-practices-to-follow-in-2025/ - Web app UX: Cygnis - https://cygnis.co/blog/web-app-ui-ux-best-practices-2025/ - General UX: Capicua - https://www.capicua.com/blog/ui-and-ux-best-practices ### React UI libraries - Install: shadcn/ui docs - https://ui.shadcn.com/docs/installation - Source: shadcn/ui GitHub - https://github.com/shadcn-ui/ui - Components: MUI - https://mui.com/ - Components: Chakra UI - https://chakra-ui.com/ - Primitives: Radix UI - https://www.radix-ui.com/ - Comparison: Builder.io - https://www.builder.io/blog/react-component-libraries-2026 ### Pattern and inspiration sites - Pattern list: IxDF - https://www.interaction-design.org/literature/article/10-great-sites-for-ui-design-patterns - Mobile pattern list: Fireart - https://fireart.studio/blog/top-mobile-ux-ui-design-pattern-libraries/ - Mobile inspiration: Mobbin - https://mobbin.com/ - Mobile inspiration: Pttrns - https://pttrns.com/ - Generic interaction patterns: UI-Patterns.com - https://ui-patterns.com/ - Extra inspiration index: Toools - https://www.toools.design/ui-web-design-inspiration-websites ### Free vs paid snapshot - Open-source and free libraries: `shadcn/ui`, `MUI Core`, `Chakra UI`, `Radix UI`. - Free/public reading resources: all principle and comparison articles listed above. - Mostly free browsing: `UI-Patterns.com`. - Freemium or paid for full access: `Mobbin`, `Pttrns`. - If `Pttrns` or `Mobbin` asks for account/payment, fall back to `UI-Patterns.com` and the Fireart article.

UI/UX Quick Cheatsheet: Fast Flows, Mobile Tips, and Library Picks