Từ background web developer đến UI designer

Không ngừng học tập – mặc dù công việc chính của tôi hiện tại là kinh doanh, nhưng tôi vẫn tin rằng mỗi người cần vững vàng một vài “hard skill” để phục vụ và có trải nghiệm đời sống phong phú hơn.

Đó chính là lý do tôi muốn trở thành một UI designer thực thụ. Dưới đây là các nội dung tôi brainstorm với AI để tự học ngành UI design.

Lý thuyết

1. Nền tảng căn bản (1-2 tháng):

• Học về nguyên lý thiết kế: Typography, Color theory, Layout, Visual hierarchy
• Làm quen với Design thinking và UX principles cơ bản
• Nghiên cứu về Human Interface Guidelines của các nền tảng (iOS, Android, Web)

2. Công cụ thiết kế (2-3 tuần):

• Tập trung học một công cụ chính: Figma (được ưa chuộng nhất hiện nay)
• Học cách tổ chức components, styles, design system

3. Thực hành (2-3 tháng):

• Redesign các ứng dụng quen thuộc
• Tạo portfolio với 3-4 dự án cụ thể
• Tham gia các design challenge trên Dribbble hoặc Behance
• Áp dụng vào các side project cá nhân, kết hợp cả design và code

4. Chuyên sâu (tiếp tục):

• Học về Design Systems và cách xây dựng chúng
• Nghiên cứu về Micro-interactions và Animation
• Tìm hiểu về Responsive Design và Cross-platform Design
• Học cách làm việc với Design tokens

5. Kết nối thực tế:

• Tham gia các cộng đồng design trên Discord, Slack
• Theo dõi các designer có kinh nghiệm trên Twitter, Medium
• Tham gia các meetup về UI/UX trong khu vực

Lời khuyên thực tế:

1. Tận dụng background lập trình để:

• Hiểu rõ về giới hạn kỹ thuật khi thiết kế
• Tạo ra những design dễ implement
• Có khả năng giao tiếp hiệu quả với developer

2. Bắt đầu từ những dự án nhỏ:

• Redesign một tính năng đơn giản
• Thiết kế landing page
• Tạo design system cho project cá nhân

Lời khuyên về thực hành mắt thẩm mỹ

Thẩm mỹ và “mắt thẩm mỹ” (design eye) là điều khó rèn luyện nhất. Dưới đây là những phương pháp thực tế để phát triển khả năng này:

1. Phương pháp “Copy work” (2-3 thiết kế/tuần):

• Chọn những thiết kế đẹp từ Dribbble hoặc Behance
• Cố gắng copy lại chính xác từng pixel
• Điểm quan trọng: Trong khi copy, phân tích:
  • Tại sao họ chọn font size này?
  • Tại sao spacing lại như vậy?
  • Màu sắc được phối hợp thế nào?

2. Phương pháp “Design Dissection” (hàng ngày):

• Mỗi ngày chọn 1 website/app yêu thích
• Chụp màn hình và vẽ các đường căn chỉnh
• Đo đạc các khoảng cách, spacing
• Xác định color palette và type scale
• Ghi chú lại những pattern thiết kế thường gặp

3. Rèn luyện “mắt thẩm mỹ” (15-30 phút/ngày):

• Vào Dribbble, lướt qua 20-30 thiết kế
• Với mỗi thiết kế, nhanh chóng đánh giá:
  • Điểm mạnh/yếu về layout
  • Điểm mạnh/yếu về typography
  • Điểm mạnh/yếu về màu sắc
• Sau đó đọc comments để xem đánh giá của cộng đồng

4. Xây dựng “Design Library” cá nhân:

• Tạo một Figma file hoặc Pinterest board
• Thu thập các ví dụ tốt về:
  • Button styles
  • Card layouts
  • Navigation patterns
  • Form designs
  • Color combinations
• Thường xuyên review và update collection

5. Tips về màu sắc:

• Bắt đầu với grayscale design
• Khi thành thạo, thêm một màu chủ đạo
• Học cách sử dụng công cụ như Coolors, ColorHunt
• Quan sát bảng màu từ các thương hiệu lớn

6. Tips về typography:

• Bắt đầu với 2 font: 1 cho heading, 1 cho body
• Tạo type scale cố định (16, 20, 24, 32, 40,…)
• Chỉ dùng 2-3 font-weight
• Copy type styles từ các website nổi tiếng

7. Thực hành có feedback:

• Tham gia các cộng đồng design review
• Chia sẻ work-in-progress để nhận góp ý
• Tìm mentor hoặc peer designer để review

8. Xây dựng thói quen:

• Chụp ảnh UI đẹp trong cuộc sống hàng ngày
• Theo dõi các designer trên Twitter/Instagram
• Đọc case study về design process
• Viết blog/note về những điều học được

Quan trọng nhất là consistency – thực hành đều đặn mỗi ngày, dù chỉ 30 phút.

Thêm chi tiết

1. Rèn luyện “mắt thẩm mỹ” – Phương pháp 30/3/30:

• 30 giây đầu tiên:
  • Nhìn tổng thể design
  • Ghi nhận cảm xúc đầu tiên
  • Xác định focal point (điểm nhấn)
• 3 phút tiếp theo phân tích:
  • Layout: Grid system, alignment, balance
  • Typography: Font pairs, hierarchy, spacing
  • Color: Palette, contrast, emphasis
  • Space: Padding, margin, white space
  • Visual elements: Icons, images, shadows
• 30 giây cuối:
  • Đánh giá lại cảm xúc
  • So sánh với phân tích kỹ thuật
  • Rút ra nguyên tắc áp dụng

Thực hành:

1. Tạo template đánh giá:

Copy- First Impression: 
- Focal Point:
- Layout Analysis:
- Typography Choices:
- Color Usage:
- Spacing Patterns:
- Key Takeaways:

2. Tạo thư viện screenshots được phân loại:

• Landing pages
• Dashboards
• Forms
• Navigation patterns
• Mobile interfaces

2. Copy work – Phương pháp Deep Practice:

A. Chọn mẫu:

• Bắt đầu với design đơn giản
• Focus vào một khía cạnh (layout/typography/color)
• Chọn style phù hợp với mục tiêu học

B. Quy trình copy:

1. Phân tích (10 phút):
   • Xác định grid system
   • Đo đạc spacing
   • Liệt kê fonts và colors
   • Ghi chú visual effects
2. Thực hiện (30-45 phút):
   • Bắt đầu với layout cơ bản
   • Thêm typography
   • Áp dụng colors
   • Hoàn thiện details
3. Review (10 phút):
   • So sánh với bản gốc
   • Ghi chú sự khác biệt
   • Tìm hiểu nguyên nhân

C. Tips hiệu quả:

• Dùng công cụ như WhatFont, ColorZilla
• Tạo style guide trước khi bắt đầu
• Record quá trình làm để review
• Không copy paste, làm lại từ đầu

3. Design Dissection – Phương pháp 5W1H:

WHAT – Phân tích các elements:

Copy└── Layout
    ├── Grid system
    ├── Columns
    └── Breakpoints
└── Typography
    ├── Font pairs
    ├── Size scale
    └── Line height
└── Colors
    ├── Primary palette
    ├── Secondary colors
    └── Gradient usage
└── Components
    ├── Navigation
    ├── Cards
    └── Buttons

WHY – Phân tích decisions:

• Tại sao dùng layout này?
• Lý do chọn color scheme?
• Mục đích của spacing?

WHERE – Context analysis:

• Vị trí các elements
• Flow của interface
• Responsive behavior

WHEN – State analysis:

• Hover states
• Active states
• Loading states
• Error states

WHO – User perspective:

• Target audience
• Accessibility concerns
• User flow

HOW – Technical implementation:

• CSS properties
• Animation effects
• Responsive techniques

4. Công cụ hỗ trợ:

Phân tích layout:

• Gridlover
• Modular Scale
• Layout Grid (Figma plugin)

Phân tích màu:

• Contrast Checker
• ColorZilla
• Palette Generator

Typography:

• Type Scale
• Font Identifier
• WhatFont

5. Quy trình thực hành hàng ngày:

Sáng (15 phút):

• Browse Dribbble/Behance
• Save 2-3 designs ấn tượng
• Quick analysis

Trưa (30 phút):

• Copy work một phần nhỏ
• Focus vào một khía cạnh

Tối (15 phút):

• Design dissection một website
• Ghi chú vào design journal