App Mobile Design

• Nắm vững các nguyên tắc và yếu tố mỹ thuật khi thiết kế banner, icon và layout App Mobile UX/UI
• Thành thạo nhóm công cụ trong thiết kế App như UI Design XD
• Hoàn thành App theo từng bước từ User Flow, Wireframe đến Prototype
• Tự tin đón đầu xu hướng nghề nghiệp với thiết kế ứng dụng App Mobile chỉ trong 3 tháng
• Chứng nhận "App Mobile Design" do Trung Tâm Tin Học - Trường ĐH Khoa Học Tự Nhiên cấp

• Sinh viên các trường Đại học, Cao đẳng, Trung cấp nghề chưa có kinh nghiệm thực tế, đang cần trang bị và hoàn thiện một cách có hệ thống kiến thức về Thiết kế App mobile.
• Người đang làm thiết kế đồ hoạ, thiết kế web cần bổ sung, củng cố và chuẩn hóa kiến thức để có thể tự tay thiết kế App/ chỉnh sửa giao diện App mobile UX/UI, tăng khả năng thăng tiến trong nghề nghiệp.
• Các bạn yêu thích thiết kế Website nói chung và App Moblie nói riêng, mong muốn một cơ hội nghề nghiệp, linh hoạt ngành nghề,…

PHẦN 1 - HƯỚNG DẪN THIẾT KẾ APP TỪNG PHẦN

Buổi 1

• Giới thiệu App design
• Icon trong app
• Hình hoạ trong app
• Banner & Voucher
• Tạo tài khoản figma- import app mẫu
• Xem CÁC MOCKUP MẪU
• Giới thiệu về logo, icon , banner cho app

Buổi 2

• Chọn đề tài
• Giới thiệu về User flow
• Tìm hiểu Luồng đi của 1 ứng dụng APP cụ thể
  • Giới thiệu các công cụ tạo Flowchart/ User Flow
  • Tạọ 1 user flow cho 1 APP cụ thể
• Flowmapp/zenflowchart/Timblee/Overflow/Lucidchart/
  • Xem mẫu và phân tích 1 user Flow cụ thể Thực hành luồng đi cho các nhánh
  • Đăng ký, quản trị tài khoản
  • Nhánh Chính Home-SẢn phẩm- dịch vụ- Chi tiết- Thanh toán-Giỏ hàng- Wishlist- Phương thức Thanh toán- kiểm tra đơn hàng- Quản trị đơn hàng..
  • Nhánh: Tiện ích Blog/ Tư vấn/ đổi trả/ Phản hồi/ FAQs/Contact..

Buổi 3: Wireframe

• Phác thảo các màn hình APP theo luồng đã học từ buổi trước
  • Nhánh Loading- intro- Đăng ký/ Đăng nhập/ quên mật mã/ quét Location...
  • Nhánh: Tiện ích Blog/ Tư vấn/ đổi trả/ Phản hồi/ FAQs/Contact...
• Balsamiq mockup...
  • Các Kích cỡ màn hình Phone
  • Các Công cụ
  • Transform
  • Các kích cỡ từng loại Element trong App

Buổi 4: Wireframe

• Thực hành tạo wireframe nhánh chính của APP - Nhánh Chính Home-SẢn phẩm- dịch vụ-Chi tiết-Voucher info- Thanh toán-Giỏ hàng- Wishlist- Phương thức Thanh toán- kiểm tra đơn hàng- Quản trị đơn hàng..
• Balsamiq mockup...
  • Style
  • Symbol

Buổi 5: UI Design

• Thiết kế
  • Header
  • Footer
  • Tạo menu Hambuger
  • Bottom navigation
  • Back button
• Hoàn thiện các màn hình APP
  • Nhánh Đăng ký/ Đăng nhập/quên mật
  • khẩu/ quản trị tài khoản/ quét location
  • Làm việc nhóm/ tạo dự án/ tạo file / import file
  • Các bảng lệnh và công cụ
  • Grid / Transform/ Align/ Distribute
  • Tìm và ứng dụng các bộ Element cho IOS và Android ( bàn phím/ thời khóa biểu/ quét location/ taskbar( sóng, pin,giờ, thời tiết...)
  • Màu sắc (solid/ Gradient/ Bitmap)
  • Text ( google font/ Local Font/ Awesome font)
  • Color Style/ Text Style/ Component / Mask
  • Import hình họa, icon, banner, voucher từ Illustrator
  • Import bitmap từ photoshop/ Ảnh gif động

Buổi 6: UI Design

• Hoàn thiện các màn hình APP
  • Nhánh Chính Home-SẢn phẩm- dịch vụ-Chi tiết-Voucher info- Thanh toán-Giỏ hàng
• Hoàn thiện các màn hình APP
  • Wishlist- Phương thức Thanh toán-kiểm tra đơn hàng- Quản trị đơn hàng..
• Hoàn thiện các màn hình APP
  • Các ứng dụng mở rộng
  • Các màn hình Loading
  • Các màn hình Chào mừng
  • Thực hành tiếp theo (hoàn thiện nhánh chính của App)

Buổi 7: Prototype -Loading -Welcome

• Prototype
• Loading -welcome
• Prototype
• Hiệu ứng cho màn hình loading và các màn hình chào mừng
• Link các màn hình Đăng ký/ đăng nhập/ quên mật khẩu..
• Các Loại Triger / Hiệu ứng
  • On Tap/After delay...
  • Navigate to / Back
  • Instant/ Dissolve/ Smart Animate
  • MoveIn/ MoveOut/ Slide/Push

Buổi 8: Prototype

• Prototype
  • Link các màn hình App từ menu
• Hambuger
  • Link các danh mục và sản phẩm từ trang chính đi và về
  • Link các trang từ Bottom navigation

• Tạo trượt ngang
  • Nhóm banner quảng cáo
  • Danh mục Sản phẩm
  • Danh sách Voucher
• Tạo trượt dọc
  • Nhóm danh mục chi tiết dài..
• Các Loại Triger / Hiệu ứng
  • On Hovering/ Drag/
  • Open Overlay / Close Overlay
  • Instant/ Dissolve/ Smart Animate
  • MoveIn/ MoveOut/ Slide/Push

• Các Loại Triger / Hiệu ứng
  • Horizotal Frame scrolling
  • Vertical Frame scrolling

Buổi 9

• Tạo và hoàn thiện UI Guideline
• Các kiểu UI guideline
  • Typography
  • Color
  • Symbol
  • Illutrator
  • Button
  • Component

Buổi 10

• Hoàn thiện ứng dụng App và Test trên Figma – mirror
  • Chuyển giao ( share)
  • Cộng đồng Figma (commulity)
• Xuất file .fig / file .dpf/ .file ảnh .jpg/ .png/ .svg…

PHẦN 2 - THỰC HIỆN ĐỒ ÁN APP MOBILE (10 BUỔI)

- Học viên chọn triển khai và hoàn thành thiết kế các loại hình App khác nhau, kể cả game đơn giản.

- Học viên trình bày ý tưởng, user flow, thiết kế và trải nghiệm app trên màn hìnhWindow/ trên phone hoàn thành sản phẩm App hoàn chỉnh.