Chuyển tới nội dung chính
Dev Templates
Khám phá
Dev Experience3 phút đọc

godly.website: nơi lục khi thấy UI của mình nhạt nhạt

Một gallery tuyển chọn các trang web có visual đẹp đến mức "astronomically good" — dùng để nhặt hero section, micro-interaction, chuyển cảnh khi cần tham khảo nhanh.

Bởi Phạm Thanh Tùng

Dev làm frontend lâu ngày có một hiện tượng quen thuộc: code xong chức năng, nhìn lại thấy đẹp "đều đều" — đúng spec, đúng design system, nhưng thiếu một cái gì đó để người dùng nhớ. Thường là hero section nhạt, animation cứng, hoặc typography thiếu bản sắc.

Trong những lúc đó mình mở godly.website — một gallery tuyển chọn các trang web có visual thuộc dạng "astronomically good". Khác với Dribbble (nhiều shot tĩnh đẹp nhưng không đi được production), godly chỉ gom những site thật đã ship và vận hành.

Nó là gì

Một lưới các trang web đã release, kèm preview cuộn (thường là video ngắn bắt cả motion). Mỗi entry link thẳng tới site thật để bạn mở ra nghịch, xem cách họ xử lý scroll, hover, reveal, form state.

Nội dung đa dạng: SaaS product, personal portfolio, wearable tech, commerce, editorial — đủ để lôi ra bất kể bạn đang dựng loại site gì. Có newsletter hàng ngày ("147 people subscribed yesterday" — cập nhật đều), và các "Sponsor" slot cũng là những dự án hay, ít spam.

Mình dùng nó thế nào

• Nhặt ý tưởng cụ thể, không phải mood tổng — thay vì lướt 30 phút lấy cảm hứng mơ hồ, mình vào với câu hỏi rõ: "hero section cho dashboard B2B trông nên như nào?", tìm 3-4 ví dụ, ghi lại cái gì hay (typography contrast, subtle parallax, empty-state motion).

• Kiểm tra kỹ thuật — mở DevTools ngay trên site thật. Font gì, CSS nào cho animation đó, bundle size, có WebGL không. Nhanh hơn đọc case study.

• Chứng minh khả thi với stakeholder — khi client hỏi "làm được kiểu này không?", gửi link một site từ godly đã làm y chang thuyết phục hơn mọi Figma mock.

Đừng chỉ copy

Cám dỗ lớn nhất là clone nguyên si một site đẹp. Vấn đề: visual đẹp của site gốc phục vụ brand của họ. Bê nguyên sang dự án khác thường tạo ra sản phẩm "đẹp nhưng lạc".

Dùng lành mạnh hơn: tháo rời từng yếu tố (typography scale, chuyển động, palette), hiểu vì sao nó hoạt động, rồi áp dụng có chọn lọc cho brand riêng của bạn.

Xem tại

Gallery đầy đủ kèm newsletter tại godly.website. Miễn phí, không cần tài khoản để browse.

Thẻ

  • Design
  • Inspiration
  • Frontend
  • UI

Bài viết khác