Thiết kế website bất động sản nghỉ dưỡng Hyatt Regency Danang Residences

Hyatt Regency Danang Residences là khu căn hộ và biệt thự nằm trong quần thể nghỉ dưỡng 5 sao ven biển Đà Nẵng, đầu tư bởi Gaw NP Capital và vận hành bởi Hyatt Hotels & Resorts™. Website phục vụ khách hàng cao cấp trong nước lẫn quốc tế, và phải tuân thủ brand guideline của một thương hiệu khách sạn toàn cầu.

Đề bài mâu thuẫn: ảnh phải đẹp tuyệt đối, trang không được chậm

Bất động sản nghỉ dưỡng bán bằng hình ảnh. Bộ ảnh thương hiệu được chụp và hậu kỳ kỹ lưỡng — nén mạnh tay làm bệt màu hoàng hôn trên biển thì mất luôn thứ đang cần bán. Nhưng để nguyên ảnh gốc thì trang nặng vài chục MB, khách bỏ đi trước khi ảnh kịp hiện.

Phần lớn công sức của dự án nằm ở việc dung hoà hai điều đó, không phải ở tính năng.

Cách làm gồm ba lớp. Thứ nhất, mỗi vị trí hiển thị có một kích thước ảnh riêng — ảnh hero, ảnh thumbnail trong lưới, ảnh trong gallery toàn màn hình được cắt sẵn theo đúng kích thước cần, không dùng chung một file rồi để trình duyệt co lại. Thứ hai, mức nén được thử nghiệm riêng cho từng nhóm ảnh thay vì áp một con số chung: ảnh nội thất nhiều chi tiết chịu được nén cao hơn ảnh hoàng hôn có dải chuyển màu mịn. Thứ ba, lazy-load theo hành vi cuộn thật — ảnh trong khung nhìn đầu tiên tải ngay, phần còn lại chờ.

Cấu trúc nội dung theo loại sản phẩm

Căn hộ, biệt thự và khối tiện ích nghỉ dưỡng là ba loại nội dung khác nhau, không nên nhét chung một mẫu trang.

Trang sản phẩm bất động sản cần mặt bằng, diện tích, số phòng, hướng nhìn — thông tin khách xem để quyết định. Trang tiện ích (hồ bơi, spa, nhà hàng) lại thiên về kể chuyện: ảnh lớn, chữ ít, bố cục dạng tạp chí. Hai kiểu trang này dùng template riêng, chỉ chung hệ thống thiết kế.

Form đăng ký nhận tư vấn nối thẳng tới đội kinh doanh, và đặt ở cuối mỗi trang sản phẩm — đúng chỗ người xem vừa đọc xong thông tin và đang cân nhắc.

Làm việc trong khuôn khổ brand guideline quốc tế

Với thương hiệu như Hyatt, màu sắc, font chữ, khoảng cách logo, cách đặt tên dự án đều có quy định thành văn bản. Đây không phải ràng buộc khó chịu mà là điều tốt: nó loại bỏ tranh luận cảm tính về thẩm mỹ.

Việc của tôi là chuyển bộ quy tắc đó thành hệ thống thiết kế trong code — biến CSS cho màu và khoảng cách, component cho các khối lặp lại — để nội dung mới thêm sau này tự động đúng chuẩn, không phụ thuộc việc người biên tập có nhớ quy định hay không.

Bạn cần website giới thiệu dự án bất động sản? Xem thêm Indochina Capital hoặc gửi yêu cầu tư vấn.