Chinh phục hoàn toàn Thiết kế UI Responsive với Figma

2 lý do tại sao người mới bắt đầu/sinh viên chuẩn bị việc làm "nhất định" phải thành thạo thiết kế responsive🤔

Lý do thứ nhất. Vì đây là khả năng quan trọng mà các nhân viên thực tế/người phỏng vấn coi trọng. Năng lực cần thiết để có việc làm(!)

Tôi có một insight từ việc làm thực tế trong lĩnh vực thiết kế sản phẩm với vai trò là người phỏng vấn, cũng như từ việc coaching UX cho những người mới bắt đầu. Đó là "Nếu muốn có việc làm, ứng viên cần có những năng lực mà người phỏng vấn muốn thấy, chứ không phải những năng lực mà ứng viên muốn thể hiện". Điều này nghe có vẻ đơn giản và hiển nhiên như việc phải nắm bắt ý định của người ra đề trong kỳ thi đại học, nhưng thực tế nhiều ứng viên không thực sự suy nghĩ kỹ về điều này, dẫn đến việc tích lũy kinh nghiệm mà câu trả lời vẫn

Lý do thứ hai. Tăng năng suất công việc đáng kể và thiết kế trải nghiệm người dùng tốt hơn

Ngày nay, người dùng không chỉ sử dụng một thiết bị duy nhất mà họ chuyển đổi giữa các thiết bị có kích thước màn hình khác nhau như điện thoại thông minh, máy tính bảng, laptop để sử dụng website hoặc ứng dụng. Trong môi trường như vậy, nhà thiết kế phải thiết kế sao cho người dùng có thể sử dụng dịch vụ một cách tự nhiên và không gặp khó khăn trên bất kỳ kích thước màn hình nào.

Nhìn vào ví dụ về Uber ở trên, chúng ta có thể thấy rằng khi sử dụng cùng một dịch vụ trên các thiết bị khác nhau, mặc dù cấu trúc giao diện và cách bố trí thông tin có thay đổi, nhưng nhìn chung vẫn duy trì được trải nghiệm người dùng nhất quán. Chính thiết kế responsive là thứ giúp mang lại trải nghiệm thống nhất cho người dùng trên các màn hình khác nhau như vậy.

Nếu hiểu và có thể sử dụng thiết kế responsive một cách đúng đắn thì năng suất công việc sẽ được cải thiện đáng kể. Nếu ngay từ đầu thiết kế và tạo ra cấu trúc có thể ứng phó linh hoạt với kích thước màn hình, thì sẽ giảm bớt việc phải tạo ra thiết kế riêng biệt cho từng thiết bị một cách lặp đi lặp lại, và tốc độ làm việc sẽ nhanh hơn gấp nhiều lần khi tái sử dụng thiết kế. Ngoài ra, trong quá trình hợp tác với developer, chi phí sửa đổi không cần thiết và giao tiếp cũng giảm bớt, giúp kết nối giữa thiết kế-phát triển có thể diễn ra hiệu quả hơn nhiều.

Kết quả là, thiết kế responsive không chỉ là kỹ thuật tạo ra "màn hình đẹp mắt" mà còn là năng lực cốt lõi trong thực tế giúp cung cấp trải nghiệm nhất quán hơn với ít nỗ lực hơn.

Bạn sẽ học được gì trong khóa học này? 🧑‍🏫

Mẹo vàng cho thiết kế UI🍯 Đại tiết lộ

Trong khóa học, tôi sẽ chia sẻ không tiếc tay các plugin và tài liệu mà tôi thực sự đang sử dụng trong công việc thực tế. Để công việc responsive vốn khó khăn trở nên dễ dàng hơn nhiều, khóa học chứa đựng những mẹo thực chiến có thể áp dụng ngay lập tức.

Thông qua khóa học này, chúng ta sẽ tạo ra những gì? 📐

Thiết kế và triển khai trực tiếp giao diện người dùng responsive được tối ưu hóa cho môi trường web và ứng dụng. Hãy tạo ra các layout thực tế có thể thích ứng tự nhiên với nhiều thiết bị khác nhau.

Thực hành các trường hợp đa dạng khác

Thực hành với các tình huống UI đa dạng thường gặp trong công việc thực tế để mở rộng cảm giác thiết kế responsive. Thông qua việc thực hành lặp đi lặp lại, phát triển khả năng ứng phó linh hoạt với cả những layout phức tạp.

Chúng tôi khuyến nghị cho những người như thế này 🧭

🎯 Người mới bắt đầu / Người chuẩn bị việc làm

Tôi khuyến nghị khóa học này cho những người mới bắt đầu học thiết kế hoặc đang chuẩn bị tìm việc muốn nắm vững các khái niệm cốt lõi và kỹ năng thực tế của thiết kế responsive. Bạn sẽ có thể trang bị khả năng sử dụng Figma có thể áp dụng ngay vào công việc thực tế và khả năng tạo ra UI responsive có thể tạo ấn tượng mạnh mẽ trong portfolio của mình.

💻 Nhà thiết kế đang làm việc

Tôi khuyến nghị khóa học này cho các nhà thiết kế muốn nâng cao độ hoàn thiện trong công việc thực tế bằng cách học các tính năng cốt lõi của thiết kế responsive như grid, auto layout. Bạn sẽ có thể trang bị khả năng thiết kế UI được tối ưu hóa cho nhiều loại màn hình khác nhau.

🧩 Nhà hoạch định / PM / PO

Phù hợp với các bạn làm kế hoạch·PM·PO muốn tạo wireframe hiệu quả và hợp tác suôn sẻ với designer. Hiểu được chức năng layout của Figma sẽ giúp cả việc thiết kế màn hình và giao tiếp đều trở nên dễ dàng hơn.

🛠 개발자

Nếu bạn là một nhà phát triển frontend, bạn có thể có cơ hội hiểu cách làm việc của designer và nâng cao hiệu quả hợp tác. Ngay cả khi trực tiếp xử lý thiết kế, bạn cũng có thể học cấu trúc và nguyên lý của UI responsive để tự tin chuẩn bị cho giai đoạn thiết kế trước khi phát triển.

Câu hỏi thường gặp 📌

Q. Người không chuyên ngành có thể học được không?

A.Vâng, khóa học này được thiết kế dành cho người mới bắt đầu và những người không chuyên. Tuy nhiên, tôi khuyến nghị bạn nên có kiến thức cơ bản về khái niệm UX design, kiến thức nền tảng cho UI design và nắm vững các chức năng cơ bản của Figma trước khi tham gia. Nếu bạn mới bắt đầu với UX/UI design, tôi khuyên bạn nên học trước Khóa học nhập môn UX Design và Khóa học UI Design sử dụng Figma mà tôi đã mở trên Inflearn, sau đó bạn sẽ có thể nắm vững responsive design nhanh hơn gấp nhiều lần thông qua khóa học này.

Q. Làm thế nào để có thể nhanh chóng thành thạo thiết kế responsive?

A. Nếu bạn đã nắm được các nguyên lý cơ bản về thiết kế responsive và cách sử dụng công cụ Figma, thì điều quan trọng nhất là bạn nên "trực tiếp" thực hành với nhiều ví dụ khác nhau. Trong khóa học này, chúng tôi đã chuẩn bị từ những kiến thức cơ bản đến các trường hợp thực tế đa dạng và sẽ hướng dẫn bạn thực hành theo để có thể thành thạo. Tuy nhiên, điều quan trọng nhất là bạn không chỉ xem bài giảng mà phải "trực tiếp" thực hành theo.

Q. Có thể học trên Windows và MacBook không?

A.Có thể. Khóa học này được tạo dựa trên công cụ Figma. Figma là phần mềm dựa trên trình duyệt internet nên có thể chạy trên cả Windows và MacBook, và trong khóa học này tôi cũng sẽ hướng dẫn các phím tắt cho cả Windows/MacBook.

Q. Có thể học khóa học với phiên bản miễn phí của Figma không?

A. Vâng, nội dung học trong khóa học này có thể được nghe bằng phiên bản miễn phí của Figma.