UI ডিজাইন

## ধাপে ধাপে UI Design রোডম্যাপ (৪-৮ মাস) **Month 1 — Visual Design Foundations:** - Color theory: color wheel, complementary, analogous, triadic schemes - Color psychology: red (urgency), blue (trust), green (growth), black (luxury) - Typography: font families (serif, sans-serif, display, monospace), x-height, kerning, leading, tracking - Visual hierarchy: size, color, contrast, whitespace, alignment, proximity - Grid systems: 8-point grid, 12-column grid, baseline grid - Composition rules: rule of thirds, golden ratio, Z-pattern, F-pattern - **Practice:** Daily UI Challenge (dailyui.co) — ১০০টা prompt complete করো - **Tools:** Figma (free) — start here, no need for Adobe **Month 2 — Figma Mastery:** - Interface: frames, artboards, layers, pages - Shapes, boolean operations, pen tool (bezier curves) - Auto Layout (⭐ crucial): responsive design without manual adjustment - Components & Variants (⭐ must-know): button states, input states, card variations - Constraints and resizing behavior - Prototyping: connections, transitions, overlays, smart animate - Dev Mode: developer handoff, CSS properties, export assets - **Plugins:** Unsplash (images), Iconify (icons), Content Reel (dummy data), Stark (accessibility) **Month 3 — Mobile UI Design:** - iOS Human Interface Guidelines + Android Material Design 3 - Screen sizes: iPhone, Android devices (responsive breakpoints) - Navigation patterns: tab bar, bottom nav, hamburger menu, floating action button - Touch targets: minimum 44x44pt, thumb zone (bottom 1/3 of screen) - Mobile form design: input types, keyboard types, inline validation - Status bar, safe areas, notch considerations - **Practice:** Redesign ৩টা popular mobile app screen (Spotify, Instagram, Uber) **Month 4 — Web & Dashboard UI Design:** - Dashboard design: data visualization, widgets, KPI cards, charts - Table design: sorting, filtering, pagination, inline actions - Responsive web design: desktop → tablet → mobile breakpoints - Design for conversion: CTA button psychology, form optimization, trust signals - Dark mode design considerations (contrast ratios, elevation) **Month 5 — Design Systems & Component Libraries:** - Atomic Design methodology: atoms → molecules → organisms → templates → pages - Design tokens: colors, typography, spacing, shadows, borders - Creating a scalable component library in Figma - Naming conventions and organization - Existing systems study: Google Material Design, Apple HIG, Ant Design, Chakra UI - Documentation for developers (Storybook, Zeroheight) **Month 6 — Advanced Visual Techniques:** - Micro-interactions: button states, loading states, success animations - 3D elements in UI: depth, shadows, glassmorphism, neumorphism (trend-aware, not overuse) - Illustration integration: custom vs stock, style consistency - Photography in UI: image treatment, overlays, gradients - Icon design: line vs filled, stroke width consistency, icon grids **Month 7 — Accessibility & Inclusive Design:** - WCAG 2.1 guidelines: color contrast (4.5:1 for text), font sizes - Screen reader compatibility: alt text, semantic HTML understanding - Keyboard navigation focus states - Color blindness considerations (Stark plugin simulation) - Inclusive imagery and language - **Tools:** Stark plugin, WebAIM Contrast Checker,axe DevTools **Month 8 — Portfolio & Professional Practice:** - Portfolio case studies: problem, process, solution, results - Dribbble shot composition: 1200x900, show context not just screens - Behance project layout: cover image, overview, process, final design - Personal website: Webflow (free), Framer, or Carrd - Client presentation skills: explaining design decisions, handling feedback - File organization and handoff best practices **Portfolio Projects (must-have):** 1. **Mobile app UI** — ৮-১০ screen full flow (onboarding → core feature → settings) 2. **Landing page redesign** — existing website-এর conversion optimize করা 3. **Dashboard design** — data-heavy interface, charts + tables 4. **Design system** — color palette, typography scale, ১৫+ components **কোথা থেকে শিখবে:** - **Free:** Figma's YouTube channel, DesignCourse YouTube, Flux Academy - **Inspiration:** Dribbble, Behance, Mobbin (real app screenshots), UI8, Screenlane - **Books:** "Refactoring UI" - Adam Wathan & Steve Schoger (⭐ must-read for developers-turned-designers), "The Elements of Typographic Style" - **Practice:** Daily UI Challenge, redesign ১টা app every week **যা avoid করবে:** - Dribbble-only inspiration (real-world constraints নেই, unrealistic designs) - ১০টা software একসাথে শেখার চেষ্টা — Figma-তে master হও - Trend chasing blindly — glassmorphism ২০২০-২১ trend, এখন dated

## UI Design Freelancing Playbook 🎨 ### Client কোথা থেকে পাবে: 1. **Upwork** — "UI Design", "Web Design", "Mobile App Design" — top categories 3. **99designs** — design contests (win = money + portfolio piece) 6. **LinkedIn** — cold outreach to startup founders 7. **Facebook Groups:** "UI Designers Bangladesh", "Freelancers of Bangladesh" 8. **Local agencies:** BD-তে web agencies — outsource design work 9. **Your own website:** portfolio + blog = inbound leads ### আমি client পাবো কি পাবো না? - **পাবো:** Every website, app, software needs UI — demand is infinite - **পাবো না (যদি):** - শুধু "pretty" design দাও, business goal consider না করো - Portfolio weak হলে (Dribbble-এ ৩টা shot — client hire করে না) - Developer handoff smooth না হলে (developer-এর question ধরতে না পারলে) - **Month 1-2:** Daily UI Challenge + popular app redesign (portfolio fill করো) - **Year 2+:** Niche specialization — SaaS UI, Fintech UI, Healthcare UI ### UI vs Graphic Design — Difference for Clients: - UI Design = digital product interface (app, website, software) - Graphic Design = print + digital visuals (logo, poster, social media) - Client-এর বুঝিয়ে দাও: "I design how your app works and looks, not just make it pretty" ### Pro Tips for Bangladeshi UI Designers: - **English portfolio mandatory** — international client-এর জন্য - **Dribbble presence:** সপ্তাহে ১টা shot upload করো — consistency = visibility - **Behance case studies:** Design process দেখাও, শুধু final design না - **Developer collaboration:** Figma dev mode শিখো, CSS basics জানো — developer-এর respect পাবে - **Niche down:** সব করার চেষ্টা না করে ১টা niche-এ expert হও (SaaS, e-commerce, fintech) ### Essential Tools (all free/cheap): - **Figma** — free, browser-based, collaboration - **Iconify** — ১০০,০০০+ free icons - **Unsplash** — free stock photos - **Google Fonts** — free fonts - **Mobbin** — real app references (inspiration without copying)