15 October, 2013
50 giao diện HTML5 ấn tượng (phần 1)
Trong loạt bài viết tới đây, Time Universal sẽ giới thiệu đến các bạn 50 mẫu giao điện website đẹp nhất được thiết kế với HTML5 – ngôn ngữ đánh dấu dùng để thiết kế website và các ứng dụng đang là xu hướng hiện nay. Ngoài ra, đối với mỗi giao diện Time Universal cũng sẽ giới thiệu các kinh nghiệm được chia sẻ trong quá trình tạo ra các sản phẩm ấn tượng này của các web designers.
Khi xây dựng trang portfolio của mình, Adam Hartwig – nhà thiết kế và lập trình web – đã sử dụng các thẻ semantic mới bênh cạnh việc áp dụng sâu History API trong HTML5. Nội dung của website được thể hiện trên một trang duy nhất và tận dụng thế mạnh của History API để giúp tạo các “deep link” nhưng vẫn giúp trang web hiển thị như là các URL bình thường khác. Giao diện của trang web là sự tổng hợp sống động của các hiệu ứng màu sắc. Mỗi một trang con thể hiện các nội dung khác nhau tương ứng nhằm giới thiệu năng lực và kỹ năng của tác giả đến người xem.
Ngoài ra, Hartwig còn sử dụng CSS3 và hiệu ứng 3D animation. Ngoài các trình duyệt mới nhất hiện nay, trang web còn được hỗ trợ JavaScript để chạy trên các phiên bản trình duyệt cũ hơn.
“The Two Minute Test” là một trong những hoạt động của chiến dịch tuyển chọn giáo viên ở Na Uy. Trang web nhằm đưa ra một bài kiểm tra kiến thức, logic và các kỹ năng khác trong vòng 2 phút cho người dùng. Đại diện cho Bộ Giáo Dục Na Uy, Fred Kihle từ agency Apt cho biết lý do chính họ chọn HTML5 để xây dựng website là bởi khả năng tương tác trên tablet, smartphone và trình duyệt mà không cần sử dụng Flash. Trang web sử dụng một số các thẻ HTML5 mới, kết hợp với thẻ Canvas và API để tạo nên những layer tương tác sâu để tạo ra những bài test thú vị.
Yas Marina Circut sẽ cho phép người xem trải nghiệm cuộc đua xe Yas Marina Công Thức 1 nổi tiếng tại Abu Dhabi. Thách thức đặt ra cho Guy Jarvie – người chịu trách nhiệm thiết kế website – là không được tạo ra một trang web với nội dung quá dài hoặc buồn chán đến mức không ai muốn xem, và HTML5 đã giúp Guy làm được điều đó một cách xuất sắc khi tạo ra một website với nhiều nội dung thú vị liên quan đến cuộc đua nhưng lại được trình bày ấn tượng và dễ thao tác
HTML5 được sử dụng trên nền background của trang web, đội thiết kế đã chuyển đổi ảnh nền với chiều rộng lên đến 4 mét và nặng 1.4 MB thành 3000 dòng lệnh SVG nhằm giảm kích thước ảnh xuống 20%.
Roger Dubuis là bậc thầy trong việc thiết kế và tạo nên những chiếc đồng hồ đeo tay tinh xảo dành cho những ai yêu thích sự tinh tế trong thiết kế, chính vì vậy website giới thiệu về sản phẩm của Roger Dubuis cũng cần phải phản ánh được các phẩm chất này. Bằng cách sử dụng HTML5 kết hợp với History API để mang lại một trải nghiệm xuyên suốt cho khách hàng mà không cần phải reload toàn bộ trang.
Để tạo nên website cho nữ ca sỹ BJork, Jam3 đã chọn HTML5 kết hợp với các khối dữ liệu 3D được đăng xuất và biểu hiện nó một cách sống động trên website. Thử thách lớn nhất là làm thế nào để có thể sử dụng file dữ liệu Google SketchUp dùng để tạo ra các hình ảnh về dải ngân hà, chất liệu chính để tạo nên nội dung cho trang web.
Shiny Demos được tạo ra bởi đội ngũ developer của Opera. Trang web đưa ra các ví dụ về việc sử dụng getUserMedia, SVG, Canvas, WebGL và nhiều tính năng khác. Website còn hỗ trợ phiên bản mobile.
Kết hợp giữa thẻ canvas và Drag-and-Drop API, website của ban nhạc indie rock Metropol mang đến một trải nghiệm tương tác cho người xem bằng cách kéo những bài hát và video họ muốn nghe thử vào màn hình chính của website.
Với trình duyệt IE8 hoặc thấp hơn thì link Youtube sẽ được hiển thị thay cho video định dạng HTML5 và người dùng sẽ được khuyên sử dụng các trình duyệt hiện đại hơn để có được trải nghiệm hoàn hảo.
Công ty dịch thuật Living Word trong đợt relaunch lại website của mình đã đưa ra yêu cầu với agency về việc tạo nên một trang web được thiết kế hiệu quả và thể hiện được nội dung một cách ngắn gọn, cô đọng nhất và quan trọng là phải tạo được hứng thú nơi người người xem mà không hề sử dụng bất kỳ hình ảnh nào.
Giải pháp được đưa ra là kết hợp hiệu ứng parallax trong thiết kế để đưa được một lượng thông tin lớn đến user nhưng vẫn giữ được sự hứng thú ở họ. Thuộc tích ‘data’ của HTML5 được sử dụng để truyền đạt thông tin hiệu quả và giảm việc sử dụng mã JavaScript trên website.
Boston Globe đã quyết định thiết kế lại website của mình nhằm hướng giao diện website thân thiện với mobile và thiết kế responsive. Boston Globe muốn có một trang web có thể chạy tốt trên cả các thiết bị có phần cứng không mạnh mẽ, chính vìvậy việc thiết kế website cần tìm ra được cách giúp cho quá trình “load” các dữ liệu hiệu quả nhất, và phải thay đổi một cách nhanh nhất trên các kích thước màn hình khác nhau. HTML5 được sử dụng với các thẻ semantic nhằm giúp tạo ra một giao diện thân thiện hơn và hỗ trợ tối đa các yêu cầu của Boston Globe.
“Clerkenwell Close – The Pathway of Smoker” là dự án nhằm đưa người xem đến các đường phố của London. Được thiết kế và phát triển bởi Duccan Deng, và được sử dụng HTML5 markup, data tùy biến – các thuộc tính HTML5, thẻ audio.
Một loạt các âm thanh đường phố được sử dụng trong website, các thẻ âm thanh có liên quan sẽ được đưa vào các vị trí khác nhau trên, khi người xem đến các hộp đêm, đoạn mã JavaScript được sử dụng để xác định vị trí của người xem và cho chơi âm thanh của pub trên nền âm thanh chính.