Khóa học

Thiết kế Portfolio với Framer

Làm chủ Framer để tự tay build website Portfolio sống động, tự do thể hiện chất riêng và dẫn dắt nhà tuyển dụng qua hành trình sản phẩm của chính bạn mà không cần biết code.

Bao gồm

Creative PortfolioResponsive ComponentStyle, Variant InteractionEffects3D Transform
Framer

Nắm vững kiến thức cơ bản về Framer

Target

Xây dựng một portfolio thu hút nhà tuyển dụng

WEB-1

Thiết kế website tương tác và cuốn hút

Ai nên tham gia khoá học này?

Bạn muốn nâng cấp Portfolio nhưng chưa biết làm sao để biến nó thành một website tương tác ấn tượng, truyền tải trọn vẹn tư duy thiết kế và cái tôi sáng tạo thay vì chỉ là những màn hình Figma tĩnh?

Bạn muốn tạo prototype tương tác để trực tiếp kiểm tra trải nghiệm người dùng, đồng thời trình bày ý tưởng thiết kế một cách đầy thuyết phục mà không cần đụng đến những dòng code phức tạp?

Bạn đang đứng trước áp lực lớn từ một thị trường tuyển dụng cạnh tranh cao, nơi những portfolio PDF, Behance,... đang dần bị chìm nghỉm giữa hàng ngàn ứng viên khác?

Bạn muốn tự tay tạo tác một website portfolio sống động, thẩm mỹ với các hiệu ứng chuyển động mượt mà để tạo ấn tượng mạnh mẽ, giúp bạn bứt phá và khẳng định cái tôi sáng tạo trong mắt nhà tuyển dụng?

Bạn muốn mở rộng cơ hội nhận thêm các job về thiết kế website doanh nghiệp, hồ sơ năng lực hay bộ Credential chuyên nghiệp cho các công ty, từ đó tạo thêm thu nhập cho mình?

UI/UX Designer

Bạn muốn nâng cấp Portfolio nhưng chưa biết làm sao để biến nó thành một website tương tác ấn tượng, truyền tải trọn vẹn tư duy thiết kế và cái tôi sáng tạo thay vì chỉ là những màn hình Figma tĩnh?

Bạn muốn tạo prototype tương tác để trực tiếp kiểm tra trải nghiệm người dùng, đồng thời trình bày ý tưởng thiết kế một cách đầy thuyết phục mà không cần đụng đến những dòng code phức tạp?

Designer đang tìm việc

Bạn đang đứng trước áp lực lớn từ một thị trường tuyển dụng cạnh tranh cao, nơi những portfolio PDF, Behance,... đang dần bị chìm nghỉm giữa hàng ngàn ứng viên khác?

Bạn muốn tự tay tạo tác một website portfolio sống động, thẩm mỹ với các hiệu ứng chuyển động mượt mà để tạo ấn tượng mạnh mẽ, giúp bạn bứt phá và khẳng định cái tôi sáng tạo trong mắt nhà tuyển dụng?

Design Freelancer

Bạn muốn mở rộng cơ hội nhận thêm các job về thiết kế website doanh nghiệp, hồ sơ năng lực hay bộ Credential chuyên nghiệp cho các công ty, từ đó tạo thêm thu nhập cho mình?

Tại sao Bạn Nên học Khóa

Thiết kế Portfolio với Framer

1100+

Học viên đã tốt nghiệp

04 lần

Nâng cấp chương trình

20+

Khóa học đã mở

Top 1

Khóa học về Framer trên thị trường

Thông tin khoá học

Thiết kế Portfolio với Framer

Khóa học “Thiết kế Portfolio với Framer” tại TELOS Academy được xây dựng nhằm giúp bạn hoàn toàn làm chủ Framer – công cụ thiết kế website no-code và ứng dụng vào xây dựng portfolio cá nhân hoặc cho doanh nghiệp. Đây là giải pháp hoàn hảo và cực kỳ linh hoạt cho nhu cầu tự xây dựng portfolio, hiện thực hóa các ý tưởng website sáng tạo, đồng thời cân bằng giữa UI/UX Logic với Sáng tạo thẩm mỹ.

Với khóa học này, bạn sẽ học online qua google meet và có video bài giảng cho học viên xem lại sau buổi học.

LỢI ÍCH KHÓA HỌC MANG LẠI:

  • Thiết kế Portfolio cá nhân chuyên nghiệp, sống động: Không còn dừng lại ở những trang PDF hay hình ảnh tĩnh, bạn sẽ tự tay dựng một trang portfolio tương tác thực tế dưới dạng một website hoàn chỉnh và tự tin publish online.
  • Thiết kế website sáng tạo không cần code: Tự do biến mọi ý tưởng giao diện độc đáo thành sản phẩm web thực tế có độ tương thích cao (Responsive) mà không cần biết code.
  • Làm prototype và trải nghiệm tương tác trực tiếp: Dễ dàng xây dựng các bản prototype có độ phân giải cao (High-fidelity) và publish trực tuyến để khách hàng, người dùng hoặc lập trình viên có thể click, tương tác và cảm nhận trực tiếp như một sản phẩm thật.

Giảng viên

KHUÊ ĐINH

Là UI/UX designer tại Samasu Digital & Design Mentor tại AllyBee với hơn 8 năm kinh nghiệm trong ngành

Học phí
3,530,000 ₫ 4,030,000 ₫
Ngày khai giảng
06/07 (thứ 2 & 6)
Thời gian học
19h-21h
Chọn hình thức học

Trình độ

CƠ BẢN

Yêu cầu
đầu vào

KHÔNG

Thời lượng

08 BUỔI

Giấy chứng nhận

01. Kiến thức cơ sở về website & làm quen với Framer

  • Bức tranh chung về các nền tảng tạo website, tổng quan về hệ sinh thái và showcase của Framer
  • Khám phá giao diện, bộ công cụ cơ bản, thư viện template và các nguyên lý Sizing, Position
  • Cơ chế kiểm soát không gian, hệ lưới của website bằng Stack & Grid
  • Thực hành: Xây dựng hoàn chỉnh Thanh điều hướng (Navbar) và khu vực Hero Section cơ bản

02. Thành phần nâng cao & Thiết kế Responsive

  • Cách tạo lập Component từ Frame, tái sử dụng trên nhiều trang
  • Cấu hình các trạng thái tương tác Variant để thay đổi giao diện theo điều kiện
  • Cách dùng Variable (Text & Color variable) và bind (buộc) dữ liệu vào Component để đồng bộ nội dung
  • Làm chủ Breakpoint (Desktop, Tablet, Mobile) để xử lý Override layout và Preview trên nhiều màn hình
  • Thực hành: Tạo và tái sử dụng Component thông minh, tối ưu hiển thị Responsive cho layout

03. Style Guide & Micro-interactions

  • Thiết lập Style chữ và Style màu sắc để tái sử dụng xuyên suốt dự án

  • Thiết lập Variant Interaction để tạo các tương tác vi mô khi người dùng thao tác

  • Thực hành: Thiết kế hệ thống Button với đầy đủ các trạng thái chuyển động

04. Animation & 3D Transform

  • Ứng dụng các effect để tăng tính sinh động cho giao diện
  • Thiết lập các trigger để kiểm soát thời điểm xuất hiện của hiệu ứng
  • Sử dụng kỹ thuật 3D Transform để tạo chiều sâu thị giác cho các phần tử trên website
  • Thực hành: Xây dựng Hero Section kết hợp hiệu ứng cuộn Parallax

05. Quản trị dữ liệu với Hệ thống CMS

  • Bản chất cấu trúc dữ liệu động trong Framer

  • Kỹ thuật tạo CMS Page (Layout Template) để hệ thống tự động sinh ra hàng loạt trang con dựa trên dữ liệu

  • Thực hành: Xây dựng trang Blog hoặc Portfolio với CMS

06. Xây dựng Portfolio chuyên nghiệp

  • Phân tích cấu trúc Portfolio thực tế từ các designer
  • Cấu trúc của một Portfolio chuẩn và các dạng Portfolio phổ biến (Case study-driven, Visual-driven, Hybrid)
  • Checklist xây dựng quy trình Storytelling giúp tạo ấn tượng trong 5 giây đầu tiên
  • Quy trình xây dựng Portfolio, các trang case study trên Framer và tối ưu SEO
  • Tích hợp Google Analytics để theo dõi và đo lường lượng truy cập

07. Kỹ năng làm việc với khách hàng

  • Am hiểu nhu cầu khách hàng
  • Lên kế hoạch, quản lý kỳ vọng
  • Trình bày Framer prototypes, nhận feedback
  • Triển khai thiết kế và bàn giao

08. Tổng kết

  • Tổng kết kiến thức
  • Chấm điểm bài cuối khoá
  • Review & feedback bài cuối khoá
  • Share file tài nguyên quà tặng

Học Xong Được gì?

01

xây dựng portfolio chuyên nghiệp

Sở hữu một Portfolio online chuyên nghiệp và ấn tượng, thể hiện rõ nét kỹ năng thiết kế và các dự án nổi bật của bạn, giúp bạn tự tin chinh phục nhà tuyển dụng và khách hàng tiềm năng.

02

thiết kế website tương tác và cuốn hút

Tự tin tạo ra những website không chỉ đẹp mắt mà còn tương tác mượt mà, mang đến trải nghiệm người dùng tuyệt vời và để lại ấn tượng sâu sắc.

03

làm việc hiệu quả với đội nhóm

Framer không chỉ là công cụ thiết kế, mà còn là cầu nối gắn kết designer và developer. Với Framer, bạn có thể dễ dàng chia sẻ prototype tương tác, đảm bảo thiết kế được triển khai chính xác.

Sản Phẩm Học Viên

UI Design

Chillsound

Trần Thiện Sáng

Figma - Khóa 33

BlogGame

Võ Trần Quang Thông

Figma - Khoá 31

Katdo Studio

Bùi Việt Tú

Mobile App - Khóa 1

GoCamp

Bùi Việt Tú

UI Design

Egoz App

Nguyễn Đặng Văn

Mobile App - Khóa 2

App Learning Language

Nguyễn hồng Hưng

UX - Khoá 17

Cinemate

Quảng Bội Kha

UI Design

DeMor

Phước Hậu

Mobile App - Khoá 01

POGO

Thịnh Đinh

Mobile App - Khóa 01

Artventure

Anh Thư

Học viên nói gì về TELOS?

Mình đang theo học Khoa học máy tính, và định hướng của mình là làm trong mảng phát triển sản phẩm, đặc biệt là UI/UX. Mình muốn kết hợp kiến thức kỹ thuật với khả năng thiết kế để xây dựng những sản phẩm công nghệ vừa hiệu quả, vừa dễ sử dụng cho mọi người. Mình thấy hài lòng nhất với môi trường học tập tại TELOS: giảng viên nhiệt tình, kiến thức được hệ thống dễ hiểu và có nhiều bài tập thực hành sát với thực tế. Sau khóa học, mình đã tự tin hơn trong việc thiết kế UI/UX và biết cách tư duy sản phẩm rõ ràng. Trộm vía, mình còn được chọn là học viên xuất sắc của khóa Tư duy Figma, điều này khiến mình rất tự hào.

Lê Xuân Thành
Học viên lộ trình UX/UI Designer

Tôi biết đến TELOS thông qua các diễn đàn và cộng đồng về thiết kế trên Facebook, có nhiều anh chị trong ngành thường xuyên chia sẻ về các khóa học chất lượng. Yếu tố chính khiến tôi quyết định chọn TELOS là danh tiếng về đội ngũ giảng viên giàu kinh nghiệm thực tế và portfolio ấn tượng của các học viên khóa trước. Tôi cảm thấy tin tưởng vào lộ trình học bài bản và cam kết hỗ trợ việc làm sau khóa học, điều này đã củng cố niềm tin rằng TELOS là lựa chọn tốt nhất để tôi bắt đầu sự nghiệp UX/UI của mình.

Trịnh Hoàng Huy
Học viên lộ trình UX/UI Chuyên sâu

Hiện tại mình đang là 1 BA và trước đây là 1 Developer, từ sau khi chuyển sang mảng phân tích nghiệp vụ thì mình cũng rất quan tâm đến phần thiết kế nên đã tìm hiểu và theo học khóa Figma và UI Design tại TELOS. Khóa học giúp mình nhìn rõ hơn mối liên kết giữa design và development: từ việc đặt tên component, quản lý màu sắc, typhography, đến cách chuẩn hóa guideline để dev có thể triển khai nhanh và đúng hơn. Ngoài ra sẽ có 1 phần project cuối khóa cũng là điểm cộng lớn. Mình phải tự xây dựng một mini system hoàn chỉnh, lấy từ dự án thực tế xong nhờ thầy sửa giúp luôn :))). Yên tâm là giảng viên ở đây dễ thương lắm, chia sẻ thẳng thắn, có kinh nghiệm thực chiến. Và mình cũng đang theo lộ trình học mà họ thiết kế.

Lê Đức Minh Quân
Học viên lớp Figma & UI Design

Điều mình ấn tượng ở Telos là cách họ chia nhỏ các khóa học theo từng mảng kiến thức, rất phù hợp với những bạn vừa muốn tự học chủ động, vừa muốn có mentor hướng dẫn để trao đổi thêm khi cần giống như mình. Giáo vụ và giảng viên ở Telos đều rất dễ thương , sp nhiệt tình.  Bên ngoài kiến thức, giảng viên thường chia sẻ trải nghiệm thực tế trong quá trình đi làm— điều mà mình nghĩ rất đáng giá với sinh viên như mình. Sau mỗi khóa thì mình không chỉ nhận được kiến thức của khóa học mà còn có thêm nhiều nguồn tài nguyên về refereces, các tips khi làm việc thực tế, cách làm việc với khách hàng và cả một sản phẩm đầu ra để thêm vào portfolio nữa.

Đỗ Hà My
Học viên lớp Figma & Web Design

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

01. Tôi chưa biết gì cả liệu có học được không?

02. Đầu ra của khóa học là gì?

03. Tôi có được hỗ trợ sau khóa học không?

04. Một lớp có tối đa bao nhiêu học viên?

05. Trung tâm có nhận dạy 1 kèm 1 không?

06. Quy trình đăng ký và vào học như thế nào?

Zalo