Trong vài tháng qua, chúng tôi thấy một xu hướng mạnh mẽ của những thiết kế web mang tính cá nhân hóa. Những thiết kế này sử dụng các họa tiết thực tế từ cuộc sống hàng ngày, chẳng hạn như các yếu tố vẽ tay, font viết tay, ghim, kẹp giấy, texture hữu cơ và scrapbook (sổ lưu niệm thiết kế tay). Đó cũng không phải là một điều bất ngờ vì những thiết kế cung cấp chức năng nhưng không có cá tính, sự bóng bẩy, các nút nổi dạng 3D đều hoàn toàn thất bại trong việc thể hiện tính cá nhân hóa và cá tính của thiết kế. Thiết kế “Cá nhân hóa” trở nên quen thuộc và thân thiện hơn. Nếu sử dụng đúng cách, các yếu tố như vậy có thể cung cấp sự thân thiện và thoải mái trong thiết kế và truyền tải nội dung một cách thực sự khác biệt.
Tuy nhiên, ngoài các yếu tố hình ảnh của thiết kế, ai cũng có thể sáng tạo với bố cục layout của trang web – về cấu trúc của nó và cách thức thông tin được trình bày và truyền đạt. Để cung cấp cho bạn một số ý tưởng làm cách nào để có thể hoàn thành nó một cách chính xác, chúng tôi đã thu thập các ví dụ các thiết kế layout sáng tạo. Thiết kế quan trọng với chúng tôi hơn việc thực hiện một số ý tưởng sáng tạo cụ thể . Chúng tôi cũng không quan tâm cho dù việc lập trình (coding) có ổn hay không. Dưới đây là một số ví dụ:
Dưới đây chúng tôi trình bày 40 sáng tạo layout vượt ra ngoài khuôn khổ, nó phá vỡ hệ thống 2 và 3 cột nhàm chán của việc layout. Chúng tôi đã thu thập những thiết kế CSS thuần khiết, layout CSS + JavaScript cũng như thiết kế Flash. Hầu hết các mẫu thiết kế trình bày dưới đây có sự mạo hiểm về cấu trúc và nội dung trình bày trang web với phương pháp tiếp cận khác thường. Đó là những gì làm cho họ khác biệt. Hy vọng rằng bạn sẽ tìm thấy một số ý tưởng sáng tạo mà bạn có thể phát triển các dự án tương lai của mình.
Chúng tôi mạnh mẽ khuyến khích các nhà thiết kế hãy thoát ra khỏi những quy ước thông thường, thử nghiệm với các cách tiếp cận mới và mạo hiểm với những ý tưởng điên rồ. Bộc lộ những gì bạn có khả năng!
20 MẪU SÁNG TẠO VỚI CSS
Pavel Buben
Pavel Buben sử dụng một bìa tạp chí theo phong cách một trang web của mình. Thật đáng tiếc, không có các trang bên trong – thật là thú vị để tìm hiểu xem nó sẽ được thiết kế như thế nào. Một cách tiếp cận thú vị và khác thường.
AIGA Los Angeles
AIGA Los Angeles sử dụng các hộp một cách sáng tạo. Tất cả các yếu tố thiết kế được đặt theo lưới cơ bản, tuy nhiên họ phá vỡ quy tắc một cách rõ ràng. Cách tiếp cận này tạo ra sức ép trong thiết kế và trông thật sự khác biệt.
SpaceCollective
Đối với bộ sưu tập của mình SpaceCollective sử dụng hệ thống lưới năm cột. Văn bản và hình ảnh được bố trí hoàn hảo trên lưới tạo ra hình thức bố cục hoàn chỉnh và một cảm giác trật tự. Chú ý kích cỡ phông chữ khác nhau và những kiểu chữ trong thiết kế – họ giới thiệu một hệ thống phân cấp hình ảnh sâu sắc vào trong cách bố trí layout, nó thích ứng hoàn hảo với sự phức tạp, bố trí không thể đoán trước.
Jason Santa Maria
Jason Santa Maria đã đưa ra một lộ trình thực sự khác nhau với bố cục trang web của mình. Mỗi bài viết được bố trí một cách khác nhau, với sự tập trung mạnh vào kiểu chữ và hình ảnh rõ nét. Dưới đây là 3 layout được trình bày. Bạn khó mà tìm những layout tương tự như thế này trên internet.
Trang thanh toán : Điểm bán hàng của Mac
Ở cái nhìn đầu tiên, trang thanh toán trông giống như một hệ thống lưới mà Apple thường sử dụng. Điều làm cho layout thú vị không chỉ ở vị trí của các yếu tố thị giác , nhưng thực tế là mỗi phần của trang đều mang tính cá nhân hóa thiết kế (mặc dù thích hợp). Layout vẫn giữ nguyên khả năng dò tìm và trực quan.
NOFRKS.design
NOFRKS sử dụng JavaScript để trình bày các phần khác nhau của trang web. Điều chúng tôi thấy thú vị đó là cách trình bày nội dung. Hầu hết các yếu tố được đặt trong một bối cảnh, tạo ra ý nghĩa thứ hai cho các nội dung.
SMS Parking
Ở cái nhìn đầu tiên SMSParking không layout gì cả. Các thiết kế dường như chỉ là một bức hình minh họa (Illustration)- tất cả các yếu tố phù hợp hoàn hảo với nhau, tạo ra sự hài hòa hình ảnh và một cảm giác cân bằng và thân thiện..
Matriz Comunicacao
Công ty của Brazil này cung cấp một ví dụ hoàn hảo về cách thiết kế và nội dung liền mạch có thể được tích hợp trong một bố cục đơn giản nhưng vẫn đầy đủ.
Mihmorandum sử dụng bố trí layout 3 cột phổ biến một cách khác thường. Mặc dù cấu trúc này là khá bình thường, bản thân thiết kế trông khác biệt và giống như một chồng giấy đặt bên trong một thư mục.
3rdM
3rdM sử dụng các biểu tượng để biểu thị các tùy chọn chuyển hướng khác nhau. Đây không phải là một loại bố trí layout mà bạn sẽ tìm thấy trong các thiết kế web khác. Và đó là những gì làm cho bố trí layout sáng tạo.
Nile Inside
Nhiều bộ sưu tập sử dụng bố trí theo chiều dọc để giới thiệu tác phẩm của mình. Nile.ru hiển thị các tác phẩm của mình trong một thứ tự thời gian như thể nó là một blog theo chiều ngang.
Rocketeer sử dụng bất đối xứng để định vị các khối nội dung trong một phong cách hấp dẫn khác thường. Chú ý rằng các khối còn lại hoàn toàn thẳng hàng với tùy chọn chuyển hướng “Home” ở phía trên của trang. Các ảnh chụp màn hình ở giữa trang kéo dài đúng hai tùy chọn chuyển hướng và có cùng chiều rộng như các khối mô tả ở phía bên phải của trang.
Sự biến dạng trong cách bố trí layout được gây ra bởi các texture organic (texture hữu cơ) bên dưới. Mặc dù thiết kế là hoàn toàn phù hợp theo quy định của lưới, nó có vẻ hỗn loạn ở cái nhìn đầu tiên. Sự căng thẳng giữa trật tự và hỗn loạn tạo căng thẳng trong cách bố trí và trông rất hấp dẫn.
Một hình nền có hiệu quả có thể giúp bố trí layout nổi bật. Hiệu quả đạt được ở đây phù hợp với mục tiêu của dự án – để khuyến khích mọi người đọc hơn.
Ở cái nhìn đầu tiên, bố trí layout như là chìm bên dưới. Điều phân biệt của nó là sự lựa chọn của kích thước hình ảnh và sử dụng tốt các khoảng trắng. Hãy chú ý không gian negative space được sử dụng trong sidebar tốt như thế nào, nơi mà yếu tố cá nhân được phân chia rõ ràng và trật tự phù hợp. Chiều rộng của hình ảnh bằng với chiều rộng của các khối nội dung. Vâng, layout này bị đóng khung lại nhưng việc sử dụng khôn khéo các khoảng trắng làm cho nó xa khỏi sự nhàm chán.
Bộ sưu tập của Hannibal
Thông thường, các menu điều hướng được đặt ở sidebar hoặc ở trên cùng của trang web. William F. Leffert thực hiện nó một cách khác biệt. Bố trí layout phi tuyến tính nổi bật phá vỡ cấu trúc hộp và cung cấp một điều gì đó hoàn toàn khác biệt. Đôi khi nó chỉ đơn giản là thử nghiệm các vị trí của các yếu tố thiết kế để đạt được các giải pháp thiết kế nổi bật.
URLshrinker
Các giải pháp thiết kế sáng tạo có thể chỉ cần đơn giản như thế này. Sự bố trí layout thanh lịch và hấp dẫn bởi URL shrinker.
15 MẪU SÁNG TẠO VỚI CSS VÀ JAVASCRIPT
ShopComposition
ShopComposition cung cấp một thanh trượt điều hướng ở phần trên của trang web. Người dùng có thể lựa chọn những nội dung mà họ muốn đọc và chọn độ rộng của các khối nội dung. Cửa hàng này có một blog liên kết và một số dự án khác (chẳng hạn như mỗi hình ảnh một ngày) để thu hút sự chú ý của khách hàng. JavaScript được sử dụng.
forgetfoo
Forgetfoo sử dụng gần như tối giản, bố trí layout đơn giản với một sidebar và một khu vực nội dung. Nhà thiết kế loại bỏ tất cả các chi tiết cần thiết và không cần thiết chỉ tập trung vào đường dẫn cuối cùng của blog. Thiết kế không chứa bất kỳ danh sách tùy chọn chuyển hướng nào. Đó là không bình thường, nhưng đó đã là qua nhiều với phong cách minimalism (tối giản). Chuyển hướng thông qua bài viết của blog được thực hiện với Javascript.
Include
Trên “Include” một khối nội dung và khối chuyển hướng tương ứng dường như “treo trong không khí”. Về cơ bản trang có hai cột; tuy nhiên. cách bố trí có vẻ là khá nguyên bản – có lẽ vì những con bò được đặt phía sau với một số lý do. Sự chuyển hướng về phía bên tay phải được thực hiện với Javascript.
Kobe
Các tùy chọn điều hướng ở phía trên cùng của trang web được tạo cho sống động nhằm tạo ra một bầu không khí thích hợp. Khi một vùng được nhấp vào, vùng nội dung chính trình bày theo chiều dọc – đầu tiên là hình nền, sau đó là nội dung. Nếu các vùng nội dung cũng có một số tùy chọn chuyển hướng, nó cũng được trình bày theo chiều dọc. Trong tình huống này, có lẽ là một quyết định thiết kế tốt hơn là sử dụng điều hướng nằm ngang thay thế, điều đó làm cho khách tham quan dễ dàng để phân biệt giữa các điều hướng chính và phụ.
tap tap tap
tap tap tap sử dụng một bố trí layout đậm và bắt mắt để cung cấp những thông điệp tới người dùng. Mặc dù cơ bản nó bao gồm các khu vực sidebar và vùng nội dung, nó lại không nhàm chán chút nào và trông hấp dẫn. Các điều hướng phía bên tay trái trang và hiệu ứng lại được tạo ra bằng cách sử dụng JavaScript.
youlove.us
Việc bố trí layout trên youlove.us rất là sống động. Nó sử dụng một hình nền sống động lớn và hiệu ứng cuộn cho phép người dùng nhanh chóng chuyển từ một phần của trang này sang trang khác. Chú ý rằng các khu vực điều hướng được lặp đi lặp lại bốn lần, trong mỗi thể loại. Hiệu ứng trượt cũng được sử dụng cho mỗi loại. Thay vì sử dụng 20 trang riêng biệt, bố trí layout kết hợp tất cả chúng trên một trang duy nhất. Kết quả là nó nhỏ gọn và thân thiện với người dùng.
Method: A Brand Experience Agency
Công ty thiết kế này sử dụng cách bố trí layout linh hoạt dựa trên JavaScript trong đó việc cập nhật kích thước của nó tùy thuộc vào kích thước cửa sổ trình duyệt. Các nội dung được “đóng gói” trong hộp là bình thường đối với một thiết kế dựa trên lưới như vậy; Tuy nhiên, sự sắp xếp của các hộp làm cho thiết kế có hiệu quả nổi bật.
Viget Labs cũng sử dụng điều hướng trượt và cuộn ngang hiệu quả làm cho người dùng tương tác năng động hơn và do đó hấp dẫn hơn. Tuy nhiên, quan trọng hơn, cách bố trí layout của chính nó đã nổi bật: bố trí layout là vô hình và giống với giao diện tương tác Flash. CSS + Javascript được sử dụng. Chúng tôi (smashing) có thể nói rằng: đây là thiết kế năm sao trong số các năm sao.
Lucuma
Lucuma cũng sử dụng bố trí layout theo chiều ngang cũng như thanh trượt điều hướng theo chiều ngang. Việc tích hợp đơn giản nhưng hiệu quả của hình nền, điều hướng, video và các nội dung làm cho bố trí layout không bình thường và khác biệt.
Trên trang này, tất cả các yếu tố thiết kế có thể kéo và một số trong số đó đều có thể click. Hình ảnh dường như được gửi đến bạn trong giây phút đầu tiên, nhưng cuối cùng tất cả đều có ý nghĩa. Đây là một bộ sưu tập khác thường, đáng nhớ và thú vị để khám phá.
IDEO
IDEO trình bày tất cả mọi thứ trên trang chính của nó. Các tùy chọn điều hướng được đặt trong các hộp màu đen và bằng cách nào đó được sắp xếp trong hộp nội dung khác. Khi một trong các hộp đen được treo trong không khí, khối nội dung liên quan được nêu bật. Đó không phải là điều hầu hết người dùng mong chờ từ một bố cục layout.
Bohdan Leshchenko
Bohdan Leshchenko sử dụng phương pháp tương tự như IDEO, nhưng trình bày tất cả tùy chọn điều hướng ở phía trên cùng của trang. Mỗi việc làm được trình bày như hình ảnh dưới các điều hướng và lan rộng ra khắp layout.
MelissaHie.com
Melissa Hie đặt tất các yếu tố thiết kế trên một trang rộng lớn. Du khách về cơ bản được định hướng từ một trang này đến một trang khác thông qua việc sử dụng hệ thống cuộn hiệu quả.
Trang web đơn với một bố cục layout rất tĩnh lặng và thoải mái. Tất cả các tùy chọn điều hướng có sẵn ngay từ cái nhìn đầu tiên. Khi một tùy chọn được nhấp, khối nội dung ở bên trái tự động được thay thế. Logo của khách sạn Oxford luôn luôn giữ vị trí của nó.
Trong bộ sưu tập này các tác phẩm của minh họa nhà thiết kế này dường như bằng cách nào đó được đặt lỏng lẻo trên một sợi dây vô hình. Khi một trong những minh họa được nhấp, tất cả các yếu tố khác tự sắp xếp theo cách mà nội dung minh họa này thể hiện trở thành chủ đạo.
Erwin Bauer KEG
Bộ sưu tập các trang của Erwin Bauer tiếp cận theo một cách khác biệt khi sử dụng giao diện có thể xoay, nhưng thực hiện trong JavaScript hơn là trong Flash. Các trang web cho phép người dùng nhấp chuột và kéo để xoay canvas, hoặc liên kết vị trí xung quanh các nội dung để di chuyển xung quanh. Các thiết kế gọn gàng , bắt chước một tài liệu thiết kế với registration và crop mark (Là các dấu đường kẻ đặt ở các góc của một hình ảnh hay trang để chỉ ra nơi sẽ gia công cắt hoặc gấp ở đó.), và các dấu hiệu trực quan chỉ dẫn canvas sẽ xoay khi bạn điều hướng.
5 MẪU SÁNG TẠO VỚI FLASH
The Secret Location một công ty truyền thông có trụ sở tại Toronto, Canada minh họa công việc của họ bằng cách cung cấp kinh nghiệm liên quan trong flash xung quanh một câu chuyện được dẫn dắt bởi một nhân vật đi theo một con đường bí ẩn dẫn đến các địa điểm bí mật. Cách tiếp cận rất tương tác, một bố trí layout trang web rất khác thường.
Kamil Gottwald
Trong bố trí của ông Kamil Gottwald cho phép người dùng xác định chiều rộng cột của trang web bằng tay. Để di chuyển theo chiều dọc người dùng cần phải di chuyển theo chiều ngang. Do đó không có thanh cuộn dọc là cần thiết. Có thể xem nhiều trang cùng một lúc.
Grooveshark Lite
Grooveshark dường như bắt chước giao diện iPod và hiện nó thực sự rất tốt. Mặc dù nó có thể không phải là rất sáng tạo, bố trí layout này rất khó để tìm thấy trên Web.
Flash cung cấp nhiều khả năng sáng tạo cho một thiết kế điều hướng tương tác. Jeremy Levine sử dụng các dải giấy năng động mà dường như treo trong không khí.
Seymourpowell đã đưa ra một ý tưởng thú vị để cung cấp cho khách tham quan với một số trực.
“Hãy để Muku làm cho bạn”: người bạn thân thiện này chỉ muốn giữ sự năng trực quan và do đó ông cố gắng tìm một số nơi trên màn hình để giữ sự chú ý của người truy cập web. Cách bố trí layout của trang web đơn giản nhưng đáng nhớ, Muku chắc chắn rằng anh sẽ được ghi nhớ sau khi cửa sổ trình duyệt được đóng lại.
Nguồn: www.smashingmagazine.com
