THIẾT KẾ & XÂY DỰNG WEBSITE

Vietnam Field Program

Colbiekim Viet Nam Field Program

THÔNG TIN DỰ ÁN

  • KHÁCH HÀNG
    COLBIE KIM., LTD
  • ĐỊA CHỈ
    TP. HCM
  • DỊCH VỤ
    THIẾT KẾ & XÂY DỰNG WEBSITE
  • LĨNH VỰC
    EDUCATION
  • TIMELINE
    1 THÁNG

Viet Nam Field Program là dự án thiết kế website giới thiệu chương trình du lịch giáo dục và trải nghiệm học thuật dành cho các trường đại học quốc tế. Website được xây dựng với mục tiêu truyền tải thông tin chương trình một cách rõ ràng, chuyên nghiệp và tạo sự tin tưởng cho các đối tác giáo dục trong quá trình tìm hiểu và hợp tác.

Với phong cách thiết kế hiện đại, bố cục khoa học và nội dung được trình bày trực quan, website giúp người dùng dễ dàng tiếp cận các thông tin về lịch trình, hoạt động học tập, quy trình đăng ký cũng như các giá trị trải nghiệm văn hóa tại Việt Nam. Toàn bộ giao diện được tối ưu để thể hiện hình ảnh thương hiệu chuyên nghiệp, đồng thời mang đến trải nghiệm sử dụng mượt mà trên nhiều thiết bị.

Dự án tập trung vào việc kết nối giữa giáo dục, văn hóa và du lịch, góp phần xây dựng cầu nối giữa các tổ chức giáo dục quốc tế và những chương trình trải nghiệm thực tế tại Việt Nam.

01

TỔNG QUAN DỰ ÁN

Colbiekim Vietnam Field Program là sáng kiến giáo dục phi lợi nhuận, kết nối sinh viên quốc tế đến Việt Nam để học hỏi, phục vụ cộng đồng và khám phá văn hóa.

Website được thiết kế với tinh thần chân thực, dễ sử dụng và trực quan, giúp người dùng dễ dàng khám phá các chương trình, câu chuyện và những trải nghiệm thực tế.

Lấy con người làm trung tâm

Xây dựng trải nghiệm dựa trên nhu cầu của người tham gia.

Kể chuyện chân thực

Truyền tải câu chuyện qua hình ảnh và nội dung thực tế.

Ưu tiên thiết bị di động

Đảm bảo trải nghiệm mượt mà trên mọi thiết bị.

Tập trung vào tác động

Làm nổi bật giá trị và những kết quả tích cực của chương trình.

02

ĐỊNH HƯỚNG THIẾT KẾ

FONT

Inter

Az Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

Heading 1

Bold/100px

Heading 2

Bold/64px

Heading 3

SemiBold/36px

Body

Regular/18px

Line Height

16

ÁP DỤNG TRONG THIẾT KẾ

Experience Vietnam Beyond the Classroom

Kết nối sinh viên quốc tế với những trải nghiệm học tập ý nghĩa tại Việt Nam.

MÀU SẮC

#002A47
#00458a
#0163A5
#D4EEFF
#777777
#F4FBFF

ỨNG DỤNG MÀU SẮC

Text
Hover
Button/Text
Line/Border
Background
Background

03

HỆ THỐNG THIẾT KẾ

LAYOUT & GRID

Website sử dụng hệ thống layout rộng, rõ ràng nhằm cân bằng giữa lượng thông tin lớn và trải nghiệm khám phá trực quan.

1440px

UI COMPONENTS

Navigation

BUTTON

Aplly Now
REQUEST INFORMATION

ICON

FORM

Full Name *

Enter your full name

Institution / Organisation

Enter yor institution or organis

Email Address *

Enter your email

Phone Number *

Enter your phone number

Expected Travel Period

e.g. May 2026

Message

......

REQUEST INFORMATION

04

ĐỊNH HƯỚNG HÌNH ẢNH

Những khoảnh khắc chân thực, con người thật và vẻ đẹp thiên nhiên Việt Nam.

Hình ảnh được sử dụng như một phần quan trọng của trải nghiệm, thay vì chỉ đóng vai trò minh họa cho nội dung.

Ưu tiên:

  • Con người và hoạt động thực tế
  • Khoảnh khắc tự nhiên
  • Thiên nhiên và địa danh Việt Nam
  • Hình ảnh nhóm và cộng đồng
  • Góc chụp mang tính khám phá

05

CẤU TRÚC TRANG

Hero

Tạo ấn tượng đầu tiên và truyền tải thông điệp chính của chương trình.

Tổng quan chương trình

Giới thiệu chương trình, mục tiêu, trải nghiệm và những thông tin quan trọng.

Learning & Pre-departure

Trình bày mục tiêu học tập và các hoạt động chuẩn bị trước chuyến đi.

Field Program

Khám phá hành trình thực tế qua lịch trình, địa điểm và các hoạt động theo từng ngày.

Team & Support

Giới thiệu đội ngũ đồng hành cùng các dịch vụ hỗ trợ trong suốt chương trình.

Programme Fee

Trình bày chi phí, các hạng mục được bao gồm và những khoản chưa bao gồm.

Safety & Logistics

Cung cấp thông tin về y tế, di chuyển, lưu trú và các điều kiện đảm bảo an toàn.

Ethics & Sustainability

Thể hiện các nguyên tắc về cộng đồng, môi trường, văn hóa và trải nghiệm có trách nhiệm.

Policies

Làm rõ các quy định về đăng ký, hủy chương trình và những trường hợp điều chỉnh lịch trình.

Contact

Kết nối người dùng với đội ngũ chương trình thông qua thông tin liên hệ và biểu mẫu.

Next Steps

Hướng dẫn người dùng từng bước từ trao đổi ban đầu đến xác nhận chương trình.

Final Contact

Khép lại hành trình bằng thông tin liên hệ, lộ trình và hình ảnh thương hiệu.

06

TRẢI NGHIỆM WEBSITE

Play Video

*** Khám phá trải nghiệm và cách nội dung được dẫn dắt xuyên suốt website.

07

TRẢI NGHIỆM ĐA THIẾT BỊ

Giao diện được tối ưu để duy trì trải nghiệm nhất quán trên mọi kích thước màn hình.

Dự án khác