Thiết kế Web với UI/UX



Tìm Hiểu Thêm

Trên 95% khách hàng tìm kiếm thông tin sản phẩm trước khi ra quyết định mua hàng.

Vậy khách hàng cần gì từ website của bạn?

  • Giao diện người dùng tiện lợi và đẹp mắt
  • Cung cấp đẩy đủ thông tin về công ty, sản phẩm và khách hàng
  • Đem đến những trải nghiệm người dùng tuyệt hảo

Muốn vậy bạn không thể bỏ qua 02 khía cạnh quan trọng:

  • UI(Giao diện người dùng)
  • UX(Trải nghiệm người dùng)

Để hiểu hơn về cách xây dựng website với UI/ UX, bạn chắc chắc không thể bỏ qua khóa học thiết kế Website với UI và UX được hướng dẫn chuyên sâu và chi tiết bởi chuyên gia Nguyễn Đức Việt – Giảng viên thiết kế website tại FPT – Arena.

Lợi ích sau khóa học

  • Thấu hiểu bản chất và ý nghĩa của UI và UX
  • Thực hiện tính năng và công cụ để thiết kế website
  • Có thể thiết kế các hiệu ứng từ cơ bản đến phức tạp
  • Sử dụng thành thục Adobe Photoshop và Muse

Bên cạnh các kiến thức kể trên, Kyna.vn còn đem đến cho bạn một trải nghiệm học tập vô cùng thú vị:

  • Được học linh hoạt mọi lúc, mọi nơi trên nhiều thiết bị như máy tính, điện thoại, máy tính bảng,…
  • Được tham gia thảo luận và đặt câu hỏi cho giảng viên không khác gì các khóa học trực tiếp.
  • Chỉ cần thanh toán học phí một lần để sở hữu khóa học trọn đời, có thể học lại bất cứ khi nào tùy thích.

Chúc bạn có được nhiều kiến thức bổ ích khi học trực tuyến tại Kyna.vn

Chi tiết khóa học

  • PHẦN 1 : GIỚI THIỆU KHÓA HỌC

    • Bài 1: Giới thiệu khóa học thiết kế UI – UX
    • Bài 2: Giới thiệu kiến thức photoshop cần dùng
  • PHẦN 2: KIẾN THỨC CƠ BẢN VỀ PHOTOSHOP

    • Bài 3: Cài đặt công cụ cho khóa học
    • Bài 4: Không gian làm việc của photoshop
    • Bài 5: Các phương pháp tách layer trong photoshop
    • Bài 6: Công cụ lasso và marquee trong xử lý layer
    • Bài 7: Tách layer bằng công cụ magnetic lasso
    • Bài 8: Tách layer bằng công cụ magic warn và selection tool
    • Bài 9: Tính năng contigous cho magic warnd
    • Bài 10: Tách layer nâng cao với công cụ refine edge
    • Bài 11: Tách layer nâng cao với công cụ refine edge – phiên bản cc 2017 – Bài tập 1
    • Bài 12: Tách layer nâng cao với công cụ refine edge – phiên bản cc 2017 – Bài tập 2
    • Bài 13: Tách layer bằng cách sử dụng công cụ pentool
    • Bài 14: Sử dụng thành thạo tính năng smart object
    • Bài 15: Qui trình thiết kế
    • Bài 16: Thiết kế banner – phần ý tưởng và kích cỡ
    • Bài 17: Xử lý tách layer bằng Magnetic tool
    • Bài 18: Xử lý tóc bằng Refine edge
    • Bài 19: Thao tác với vùng chọn và đổ màu
    • Bài 20: Thao tác với mặt nạ để tạo hiệu ứng cho nhân vật
    • Bài 21: Hai phương pháp vẽ hinh trong photoshop
    • Bài 22: Vẽ hình tự do sử dụng Pentool
    • Bài 23: Xử lý phần text
    • Bài 24: Xử lý phần background
    • Bài 25: Tổng kết kiến thức phần photoshop
  • PHẦN 3 : CÀI ĐẶT ADOBE MUSE CC 2017

    • Bài 26: Giới thiệu phần mêm Adobe Muse CC 2017 – why và how
    • Bài 27: Cài đặt
  • PHẦN 4 : CƠ BẢN VỀ ADOBE MUSE QUA BÀI TẬP 1

    • Bài 28: Giới thiệu bài tập số 1
    • Bài 29: Setup cơ bản trong Adobe Muse và cách chạy thử file trong muse
    • Bài 30: Sử dụng font thế nào, dùng icon font thế nào trong Muse
    • Bài 31: Tóm tắt kiến thức
    • Bài 32: Tạo trang company và link tương tác
    • Bài 33: Tạo menu điều hướng trong Muse thế nào
    • Bài 34: Hoàn thiện web đầu tiên với việc sử dụng master page
  • PHẦN 5 : GIỚI THIỆU THIẾT KÊ WIREFRAME

    • Bài 35: Định nghĩa wireframe – what – why – how
    • Bài 36: Học thiết kế wireframe qua bài tập
  • PHẦN 6 : THỰC HÀNH THIẾT KẾ WIREFRAME QUA BÀI TẬP

    • Bài 37: Cài đặt ban đầu cho thiết kế wireframe
    • Bài 38: Xử lý master page
    • Bài 39: Xử lý trang chủ
    • Bài 40: Xử lý trang chủ – P2
    • Bài 41: Xử lý trang Giới thiệu
    • Bài 42: Thiết kế trang gói dịch vụ
    • Bài 43: Sử dụng nhiều trang master thế nào
    • Bài 44: Tạo menu đa cấp cho việc chuyển đổi các trang wireframe
    • Bài 45: Tổng kết về thiết kế wireframe
  • PHẦN 7 : THIẾT KẾ THÀNH PHẦN MENU TRONG ADOBE MUSE

    • Bài 46: Giới thiệu các thành phần UX
    • Bài 47: Cách thiết kế menu cố định khi cuộn chuột
    • Bài 48: Cách thiết kế menu cố định trái và phải
  • PHẦN 8 : THIẾT KẾ HIỆU ỨNG TƯƠNG TÁC CUỘN CHUỘT TRÊN ADOBE MUSE

    • Bài 49: Cách thiết kế hiệu ứng tương tác khi cuộn chuột
    • Bài 50: Áp dụng scroll UX cho bài tập thực tế
  • PHẦN 9 : THỂ HIỆN HIỆU ỨNG FIX BACKGROUND VÀ LIGHTBOX TRÊN ADOBE MUSE

    • Bài 51: Thiết kế hiệu ứng fix background
    • Bài 52: Thiết kế hiệu ứng lightbox
  • PHẦN 10 : GIỚI THIỆU VỀ THIẾT KẾ RESPONSIVE TRONG ADBOE MUSE QUA BÀI THỰC HÀNH

    • Bài 53: Thiết kế thành UI-UX – Thiết kế responsive trong Adobe Muse 2017
    • Bài 54: Thiết kế responsive – phương pháp số 1
    • Bài 55: Thiết kế responsive – phương pháp số 2 – Adaptive
  • PHẦN 11 : PHƯƠNG PHÁP THIẾT KẾ MENU RESPONSIVE TRONG MUSE

    • Bài 56: Thiết kế menu responsive – phần 1
    • Bài 57: Thiết kế menu responsive – phần 2
    • Bài 58: Thiết kế menu responsive – phần 3
  • PHẦN 12 : PHƯƠNG PHÁP THIẾT KẾ HIỆU ỨNG TRƯỢT TRONG ADOBE MUSE

    • Bài 59: Thiết kế hiệu ứng trượt của landing page thế nào
    • Bài 60: Thực hành thiết kế hiệu ứng trượt cho landing page – phần 1
    • Bài 61: Thực hành thiết kế hiệu ứng trượt cho landing page – phần 2
  • PHẦN 13 : THIẾT KẾ HIỆU ỨNG TƯƠNG TÁC KIỂU HOVER BẰNG GRAPHIC STYLE TRONG MUSE

    • Bài 62: Thiết kế các hiệu ứng tương tác kiểu hover
    • Bài 63: Thực hành với graphic style trong Muse
    • Bài 64: Thực hành thiết kế hiệu ứng hover bằng graphic style và lightbox – P1
    • Bài 65: Thực hành thiết kế hiệu ứng hover bằng graphic style và lightbox – P2
    • Bài 66: Thực hành thiết kế hiệu ứng hover bằng graphic style và lightbox – P3
    • Bài 67: Thực hành thiết kế hiệu ứng hover bằng graphic style và lightbox – P4
  • PHẦN 14 : HIỆU ỨNG TƯƠNG TÁC NÂNG CAO QUA BÀI THỰC HÀNH

    • Bài 68: Thực hành thiết kế tương tác nâng cao – Phần 1
    • Bài 69: Thực hành thiết kế tương tác nâng cao – Phần 2
    • Bài 70: Thực hành thiết kế tương tác nâng cao – Phần 3
    • Bài 71: Thực hành thiết kế tương tác nâng cao – Phần 4
    • Bài 72: Thực hành thiết kế tương tác nâng cao – Phần 5
    • Bài 73: Thực hành thiết kế tương tác nâng cao – Phần 6
  • PHẦN 15 : KẾT NỐI ADOBE PHOTOSHOP VÀ ADOBE MUSE CC 2017

    • Bài 74: Kết nối Photoshop CC 2017 và Adobe Muse CC 2017
    • Bài 75: Áp dụng thiết kế banner với photoshop và muse
  • PHẦN 16 : THỰC HÀNH VỚI CÁC TÍNH NĂNG THIẾT KẾ UX SẴN CÓ TRONG MUSE

    • Bài 76: Cách cài đặt widget trong muse – Áp dụng thiết kế background video
    • Bài 77: Giới thiệu phương pháp thiết kế slide show không cần widget
    • Bài 78: Thiết kế google map và youtube trên Muse thế nào
  • PHẦN 17 : THỰC HÀNH ADOBE MUSE CC 2017 QUA PROJECT THỰC TẾ

    • Bài 79: Giới thiệu project web nội thất và các kiến thức cần sử dụng
    • Bài 80: Getstarted
    • Bài 81: Thiết kế menu và logo
    • Bài 82: Thiết kế UX cho menu – P1
    • Bài 83: Thiết kế UX cho menu – P2
    • Bài 84: Thiết kế hiệu ứng slide trượt ngang – Phần 1
    • Bài 85: Thiết kế hiệu ứng slide trượt ngang – Phần 2
    • Bài 86: Thiết kế hiệu ứng slide trượt ngang – Phần 3
    • Bài 87: Thiết kế hiệu ứng slide trượt ngang – Phần 4
    • Bài 88: Thiết kế khối dịch vụ bằng cách sử dụng icon font
    • Bài 89: Thiết kế khối sản phẩm với UX lightbox và Hover – Phần 1
    • Bài 90: Thiết kế khối sản phẩm với UX lightbox và Hover – Phần 2 – Sử dụng photoshop hỗ trợ Muse
    • Bài 91: Thiết kế khối sản phẩm với UX lightbox và Hover – Phần 3
    • Bài 92: Thiết kế khối sản phẩm với UX lightbox và Hover – Phần 4
    • Bài 93: Thiết kế khối sản phẩm với UX lightbox và Hover – Phần 5
    • Bài 94: Thiết kế phần dịch vụ
    • Bài 95: Thiết kế phần hiệu ứng slide cảm nhận khách hàng
    • Bài 96: Thiết kế phần nút và nội dung slide
    • Bài 97: Thiết kế hiệu ứng trượt
    • Bài 98: Thiết kết UX cho khối team member
    • Bài 99: Thiết kế hiệu ứng Tab
    • Bài 100: Hướng dẫn hoàn thiện thiết kế UI-UX cho website nội thất
    • Bài 101: Tổng kết về Adobe Muse và giới thiệu phần quản trị website Muse với WordPress
  • PHẦN 18 : GIỚI THIỆU VÀ CÀI ĐẶT ADOBE EXPERIENCE CC 2017

    • Bài 102: GIOI THIEU ADOBE XD CC 2017
    • Bài 103: Cài đặt Adobe Xd
  • PHẦN 19 : LÀM QUEN VỚI ADOBE EXPERIENCE CC 2017 QUA BÀI THỰC HÀNH

    • Bài 104: Không gian làm việc của adobe xd cc 2017
    • Bài 105: Bài tập đầu tiên về Adobe XD cc 2017
  • PHẦN 20 : THIẾT KẾ ỨNG DỤNG TRÊN ADOBE EXPERIENCE CC

    • Bài 106: Bài tập 2 -Thực hành sử dụng Adobe XD Prototype trên giao diện iphone 7
    • Bài 107: Thực hành thiết kế giao diện App cho ipad Pro
    • Bài 108: Thiết kế giao diện trang chi tiết
    • Bài 109: Thực hành với Prototype
    • Bài 110: Hoàn thiện ứng dụng đầu tiên với Adobe XD
    • Bài 111: Upload và tạo link trực tuyến cho ứng dụng thiết kế trong Adobe XD
  • PHẦN 21 : THIẾT KẾ ỨNG DỤNG ĐỌC TIN TRÊN ADOBE EXPRIENCE CC

    • Bài 112: Giới thiệu bài tập 3 . thiết kế App đọc tin trên iphone
    • Bài 113: Vẽ phần Top của ứng dụng
    • Bài 114: Thiết kế phần slide cho banner
    • Bài 115: Sử dụng Repeat grid thiết kế phần giao diện đọc tin
    • Bài 116: Sử dụng Scroll cho thiết kế phần giao diện đọc tin
    • Bài 117: Xử lý phân trang bằng Repeat Grid
    • Bài 118: Thiết kế footer
    • Bài 119: Thiết kế thanh tìm kiếm
    • Bài 120: Cách sử dụng font awesome cho tất cả icon trong Adobe xd
    • Bài 121: Thiết kế menu chi tiết cho ứng dụng
    • Bài 122: Xử lý phần điều hướng cho Menu bằng prototype
    • Bài 123: Thiết kế giao diện trang chi tiết đọc tin
    • Bài 124: Thiết kế giao diện trang chi tiết đọc tin – Phần 2
    • Bài 125: Điều hướng cho ứng dụng bằng prototype
    • Bài 126: Xuất bản App
    • Đánh giá góp ý cho khóa học
    • Khóa học liên quan

Đăng Ký Học Ngay

 

 

 

Trả lời

Email của bạn sẽ không được hiển thị công khai.