Các trang web tốt nhất chỉ có HTML và CSS

Sao chép một bản sao chính xác của một trang web hiện có là một cách tuyệt vời để thực hành HTML và CSS của bạn. Nhân bản một trang chủ cho phép các nhà phát triển đưa các kỹ năng hiện có của họ vào sử dụng và tìm hiểu các công cụ mới. Thông qua thực hành này, các nhà phát triển sẽ xây dựng sự hiểu biết của họ về những gì cần thiết khi thiết kế một trang web và cách đạt được kết quả mong muốn

Một số trang web này sử dụng các công nghệ mới nhất để mở rộng ranh giới của những gì có thể có trên web; . Cho dù bạn đang sử dụng HTML đơn giản hay đi sâu vào WebGL và 3D CSS, bạn sẽ tìm thấy thứ gì đó ở đây để truyền cảm hứng cho mình

Chúng tôi cũng có tuyển tập tuyệt vời các ví dụ truyền cảm hứng về CSS để bạn khám phá.  

01. Appy Fizz [mở trong thẻ mới]

Appy Fizz là thức uống có ga tự mô tả là 'rượu sâm panh của đồ uống trái cây'. Trang web Appy Fizz mới là một phần trong dự án đổi thương hiệu rộng rãi hơn của công ty thiết kế Sagmeister & Walsh có trụ sở tại NYC [opens in new tab] . Như những người sáng tạo giải thích trong nghiên cứu điển hình của họ, danh tính "hình dung các bong bóng có ga thông qua ngôn ngữ đồ họa động của các hình cầu và hình tròn 3D. "

Thiết kế là sự kết hợp thú vị giữa các yếu tố ba chiều siêu phẳng và ngụ ý. Ngôn ngữ hình tròn được viết bằng màu đỏ đậm, trắng và đen làm tôi nhớ đến tác phẩm của Yayoi Kusama, nghệ sĩ nổi tiếng thế giới gắn liền với nghệ thuật đại chúng, chủ nghĩa tối giản và họa tiết chấm bi.  

Nghệ thuật và không gian của nó trong các ngành công nghiệp thương mại là chủ đề mà Sagmeister & Walsh sử dụng xuyên suốt các tác phẩm của họ và thật thú vị khi xem sự kết hợp này chuyển thành web như thế nào. Ở đây có nhiều hình ảnh động và các yếu tố canvas tương tác nói cùng một ngôn ngữ hình ảnh – một mô phỏng cacbonat thậm chí còn đi theo con chuột của người dùng khi nó được di chuyển trên trang web

02. Được tạo bởi vài [mở trong thẻ mới]

Made by Few là hội nghị web thường niên được tổ chức bởi Few [opens in new tab] , một công ty thiết kế và phát triển ở Arkansas. Hình minh họa rõ ràng, chi tiết của Sally Nixon [mở trong tab mới] xuất hiện trong tiêu đề và mô tả của diễn giả, và phải mất một lúc để nhận ra rằng có .

Khi bạn khám phá trang web, có nhiều điều bất ngờ hơn. Arlton Lowry, đồng sáng lập của Few và là người tổ chức hội nghị cho biết: "At Few, chúng tôi yêu thích những sự cố thú vị và khuyến khích khám phá". Bám sát triết lý khám phá của họ, có những viên ngọc ẩn nằm rải rác khắp trang web [chúng tôi sẽ không cho đi tất cả, nhưng hãy thử nhấn Mã Konami. ]

Những yếu tố thú vị này mang lại cho trang web rất nhiều cá tính mà Arlton gán trực tiếp cho văn hóa đại lý. "Chúng tôi tin rằng khi bạn cung cấp cho mọi người một môi trường cởi mở và vui vẻ thì không thể biết trước điều gì sẽ xảy ra. "

03. Allbirds [mở trong thẻ mới]

Allbirds là thương hiệu giày thể thao đến từ xứ sở của 29.221.344 con cừu. Nó bắt đầu khi người đồng sáng lập Tim Brown quan sát thấy những phẩm chất tuyệt vời của len Merino và tự hỏi tại sao nó chưa bao giờ được sử dụng trong giày dép trước đây

Trang web được xây dựng bằng Shopify, kết hợp ảnh phong cách sống với hình minh họa. Kết quả là một trải nghiệm thú vị không chỉ kể câu chuyện đằng sau Allbirds mà còn mang đến cho bạn cảm nhận về chính sản phẩm

Brown giải thích về lý do đằng sau trang web: "Nó được thiết kế để thể hiện sự chú ý đáng kinh ngạc đến từng chi tiết và suy nghĩ đằng sau thiết kế sản phẩm của chúng tôi". "Chúng tôi đã đầu tư rất nhiều vào nhiếp ảnh - và nhiếp ảnh gia người kiwi Henry Hargreaves ở NYC - để làm cho trang web trở nên sống động và nói rõ sứ mệnh của chúng tôi là tạo ra những đôi giày tốt hơn theo cách tốt hơn. "

Cả Brown và Red Antler [mở trong tab mới] nhóm nói về sự cống hiến hết mình của họ cho UX của trang web và cách họ . Phần Câu hỏi thường gặp trần tục được đưa vào cuộc sống với các ảnh GIF động và hình minh họa được sử dụng trên toàn bộ trang web dưới dạng mô-típ kể chuyện bất ngờ.

04. Karim Rashid [mở trong thẻ mới]

Nhà thiết kế Karim Rashid sung mãn như được tôn vinh. Với hơn 3.000 thiết kế đang được sản xuất và làm việc trong 20 bộ sưu tập vĩnh viễn trên toàn thế giới, có lẽ không có gì ngạc nhiên khi trang web của riêng anh ấy đã lùi bước trong 10 năm qua. Cho đến khi anh ấy ủy thác Anton & Irene, đó là

Với thương hiệu bao gồm các tương tác hấp dẫn, kiểu chữ giàu cảm xúc và bố cục thực sự không phụ thuộc vào thiết bị, bộ đôi này đã mang đến một trang web mời gọi khám phá mạnh mẽ. Tất nhiên, đó là điểm. "Mục tiêu chính của chúng tôi là giới thiệu vô số sản phẩm và dự án theo cách hấp dẫn trực quan," cặp đôi này nói trên blog của họ

Rất nhiều sản phẩm này cũng là một thách thức. Làm cách nào để cung cấp hơn 5.000 hình ảnh có hình dạng và kích cỡ khác nhau trong một môi trường đáp ứng? . tưởng tượng lại các bố cục thông thường và cách tiếp cận lo-fi để cấu trúc để tạo ra một lưới chính xác, linh hoạt kết hợp với kiểu chữ đậm [nhưng không phô trương]

Có lẽ điều ấn tượng nhất về trang web mới của Rashid là sự chuyển đổi liền mạch giữa các khung nhìn. "Chúng tôi luôn thiết kế đồng thời tất cả các màn hình. Thời điểm chúng tôi có ý tưởng cho một thành phần hoặc bố cục, chúng tôi sẽ thử nó trên tất cả các màn hình và xem liệu nó có hợp lý không. "

05. Lịch sử [mở trong thẻ mới]

Lịch sử - dự án năm cuối của nhà thiết kế và nhà phát triển người Israel Matan Stauber tại Học viện Nghệ thuật và Thiết kế Bezalel - là một dòng thời gian tương tác kéo dài không dưới 14 tỷ năm, từ Vụ nổ lớn cho đến ngày nay. Theo đúng nghĩa đen, trải rộng trên toàn bộ lịch sử của vũ trụ đã biết, đây là một đồ họa thông tin đồ họa tương tác rộng lớn thách thức định kiến ​​của chúng ta về cách giao tiếp với các chủ đề phức tạp.

Bao gồm các chủ đề từ văn học và âm nhạc đến các vụ ám sát, phát minh và tôn giáo, dòng thời gian của Lịch sử mời chúng ta khám phá các sự kiện trong quá khứ phong phú của chúng ta, mỗi sự kiện được lấy tự động từ Wikipedia và hiển thị trên màn hình dưới dạng một chấm đen nhỏ. Có hai chế độ. chế độ xem ngang, từ trái sang phải cho phép người dùng về nhà trong một khoảng thời gian cụ thể;

Stauber cho biết ông luôn bị mê hoặc bởi ý tưởng cho thấy lịch sử diễn ra theo thời gian. "Dòng thời gian là cách phổ biến nhất để hình dung lịch sử, nhưng tôi cảm thấy chúng luôn rất hạn chế. Ngay từ khi bắt đầu dự án này, tôi đã biết mình muốn tạo một dòng thời gian không giới hạn trong một năm, một thập kỷ hay một khoảng thời gian. Tôi muốn một dòng thời gian có thể chứa tất cả lịch sử. "

06. Trên lưới [mở trong thẻ mới]

Mặc dù căng thẳng với nhiều người, chuyển văn phòng cũng có thể là một nguồn cảm hứng tuyệt vời. Khi Hyperakt chuyển đến Gowanus, Brooklyn, sự phấn khích của nhóm khi khám phá những kho báu ẩn giấu trong môi trường xung quanh mới đã dẫn đến sự ra đời của On the Grid. một hướng dẫn khu phố quốc tế, giám tuyển bởi các nhà thiết kế

Trang web tối giản nhưng vẫn ấn tượng và được "thiết kế để có cấu trúc cao, nhưng vui tươi và năng động, giống như nội dung trên trang web". Tính thẩm mỹ vô nghĩa tránh xa bẫy hình ảnh anh hùng điển hình và tận dụng tốt khung nhìn ngay cả ở kích thước cực lớn

Và sau đó là sự chú ý đến từng chi tiết. Từ logo hoạt hình đến 100 [và còn tiếp tục] hình minh họa thành phố độc đáo và hoạt ảnh đơn giản, On the Grid rõ ràng không chỉ là một blog về phong cách sống khác

Trên blog của mình, Hyperakt giải thích cách họ muốn tạo ra "một nguồn tài nguyên đáng tin cậy nắm bắt được bản chất thực sự của những nơi chúng ta yêu thích, thông qua những bức ảnh đẹp, mô tả chân thực và sự sắp xếp theo định hướng thiết kế. " Với việc có thêm nhiều người quản lý tham gia mỗi tháng, On the Grid có thể sớm đến một khu phố gần bạn

07. LS Productions [mở trong thẻ mới]

LS Productions gần đây đã mở rộng tầm nhìn của mình từ việc tìm nguồn cung ứng tại các địa điểm tuyệt vời [dưới biệt danh Location Scotland] để trở thành công ty sản xuất dịch vụ chuyển động và ảnh tĩnh lớn nhất Vương quốc Anh hiện nay. Thương hiệu và trang web của nó được sản xuất bởi cơ quan Whitespace của Edinburgh

Nhà thiết kế cấp cao Mike Bryant cho biết ưu tiên hàng đầu là để công việc của công ty lên tiếng. "Họ có một danh mục đầu tư đáng kinh ngạc, từ ảnh tĩnh đến chuyển động, đến nỗi nhiệm vụ chính của chúng tôi là tạo ra một cấu trúc bổ sung cho loại tối thiểu bằng hình ảnh. " Cách tiếp cận này thể hiện ngay lập tức trên trang chủ, nơi gói gọn sản phẩm rộng rãi của công ty với sự kết hợp phù hợp giữa kiểu chữ hoạt hình và video

Những thách thức kỹ thuật chính – giữ thời gian tải ở mức tối thiểu và quản lý các loại cây trồng khác nhau để có hình ảnh chất lượng cao – đã được khắc phục bằng cách thay thế hình ảnh có độ phân giải cao hơn khi cần và sử dụng JavaScript để quản lý động chiều cao và tỷ lệ khung hình của hình ảnh ở các kích thước màn hình khác nhau

Kết quả cuối cùng, Bryant nói, là một "trang web rút gọn sử dụng các bảng mô-đun, kiểu sạch sẽ và bảng màu tối thiểu để hoạt động như một phông nền tinh tế cho tác phẩm tuyệt đẹp"

08. Lordz [mở trong thẻ mới]

"Vui chơi lâu đời hơn văn hóa, vì văn hóa. luôn luôn giả định xã hội loài người, và động vật không đợi con người dạy chúng cách chơi. " Do đó bắt đầu Homo Ludens của Johan Huizinga, nơi tác giả thảo luận về tác động của việc vui chơi trong xã hội

Yếu tố vui chơi là yếu tố mà Lordz, một học viện khiêu vũ có trụ sở tại Thụy Sĩ, rất coi trọng. Đối với Lordz, khiêu vũ không chỉ là chuyển động; . Được giao nhiệm vụ thiết kế một địa điểm cho học viện, Eidenbenz/Zürcher đã sử dụng đặc tính này để định hướng nghệ thuật cho học viện

Giám đốc nghệ thuật và đối tác Daniel Zürcher giải thích: "Chúng tôi muốn tạo ra thứ gì đó đối đầu với trải nghiệm kỹ thuật số bằng chính trái tim của Homo Ludens". "Một cách vui tươi để hiểu sâu hơn về việc luyện tập khiêu vũ hàng ngày; chuyển động, cảm xúc, v.v. Để đạt được điều này, chúng tôi đã sử dụng công nghệ mới nhất trong quay phim, hậu kỳ và tất nhiên là lập trình. "

Kết quả khá ấn tượng;

Trang web có thể được tạo chỉ bằng HTML và CSS không?

Trang web nào sử dụng HTML và CSS tốt nhất?

Làm cách nào tôi có thể kiếm tiền chỉ bằng HTML và CSS?

HTML và CSS có tốt cho phát triển web không?