Thiết Kế Layout Web

Trang chủ » Tư vấn »Tư Vấn» Để có một website hiệu quả» Thiết Kế Layout Web

Ngày tạo: 24/08/2014

Thiết Kế Layout Web

Cho dù đối với cả những người “ngoại đạo” thì việc xác định một bản thiết kế thỏa mãn tất cả các yêu về "web đẹp" cũng rất dễ dàng: web đẹp cả về thiết kế lẫn nội dung. Việc đó cũng giống như khi bạn làm những mẩu giấy ghi chú mà bạn hay gắn lên tủ lạnh ở nhà. Cho dù là có hàng triệu cách để sắp xếp những mẩu giấy đó nhưng chỉ một vài cách sắp xếp thì nó mới có nghĩa. Những mẩu giấy ghi chú đó cũng giống như những thành phần, những ô trong một trang web vậy. Tuy số lượng những ô này còn phụ thuộc vào kích cỡ và nội dung của trang nhưng đa số các website điều có những thành phần sau như hình 1.5

Bây giờ hãy đi vào từng thành phần một nhé:

Khung Chứa

Mỗi trang web đều có một khung chứa. Nó có thể chứa phần nội dung chính của trang hoặc chứa hết tất cả những liên kết. Nếu không có khung chứa chúng ta sẽ không có chỗ để đưa nội dung vào trang. Những yếu tố còn lại sẽ bị trôi ra ngoài khỏi vùng ranh giới của màn hình browser và rơi vào vùng khoảng không trống. Độ rộng của khung chứa có thể thay đổi, có nghĩa là nó có thể mở rộng để bao quát hết độ rộng của browser hoặc có thể cố định để nội dung có cùng một độ rộng bất kể kích cỡ của window.

Logo

Khi nói về những đặc điểm nhận dạng, những nhà thiết kế web thường lấy logo hoặc những màu sắc được thấy trên những tài liệu marketing của công ty như danh thiếp, thư giới thiệu, brochures, vân vân. Khung đặc điểm nhận dạng trên một website nên bao gồm logo hoặc tên công ty và phải được để phía trên trong mỗi trang của website. Khung đặc điểm nhận dạng làm tăng độ nhận diện thương hiệu đồng thời cho người dùng biết rằng những trang mà họ đang xem là của cùng một website.

Navigation: thanh chuyển hướng

Một điều tất yếu đó là hệ thống chuyển hướng của website phải dễ dàng được nhìn thấy và sử dụng. Người dùng thường quen với việc thanh chuyển hướng nằm phía trên cùng của website. Cho dù bạn có thiết kế nó theo chiều dọc hay ngang, xuôi hay ngược thì nó cũng phải được để càng gần đầu trang càng tốt. Tối thiểu thì mọi nội dung trong thanh chuyển hướng nên được nổi bật.

Content - phần nội dung

Nội dung là “ông vua” trong một website. Những người truy cập website thông thường chỉ vào và ra một website trong khoảng thời gian một vài giây nếu họ không tìm thấy những thông tin mà họ muốn tìm. Họ sẽ đóng browser hoặc là vào một trang khác. Việc để cho khung nội dung nằm ngay phần trung tâm của thiết kế là điều tối quan trọng vì nó có thể giúp cho những người truy cập dễ dàng lướt qua nội dung để tìm kiếm thông tin họ cần.

Footer

Được đặt ở dưới cùng của website, Footer thường bao gồm những copyright, liên hệ, thông tin hợp lệ cũng như một vài liên kết để quay về trang chính của website. Footer còn làm nhiệm vụ tách rời phần nội dung ra khỏi phần cuối của browser, thông báo cho người truy cập biết rằng họ đang ở cuối trang rồi.

Whitespace - Khung trống

Những nhà thiết kế đồ họa định nghĩa khung trống đơn giản là những vùng của trang web mà không có bất cứ hình ảnh hoặc chữ nghĩa gì. Trong khi đó, nhiều nhà thiết kế website (và cả khách hàng nữa) cảm thấy phải làm đầy mọi khoảng trống của một website bằng hình ảnh, văn bản, bảng, dữ liệu … là điều cần thiết. Nếu không có một kế hoạch cụ thể để sử dụng khung trống, các nhà thiết kế sẽ cảm thấy rất tù túng, như là ở trong một căn phòng đầy người vậy. Khung trống giúp cho bản thiết kế “tươi mát” hơn bằng việc điều chỉnh mắt của người truy cập đi xung quanh trang web và giúp tạo sự cân bằng và thống nhất – 2 nội dung quan trọng mà chúng ta sẽ bàn chi tiết hơn ở phần sau.

Tới lúc này thì chúng ta đã có được một cuộc gặp gỡ tưởng tượng với khách hàng của bạn, và giả sử là nó có ích. Khách hàng của bạn đã giải thích kĩ lưỡng về công việc kinh doanh của ông và những mong muốn của ông về website. Mặc dù ta chưa thể nhìn ra được nội dung chính xác của mình là gì nhưng từ những khung cơ bản trong phần Khung sườn của trang web, ta có để phát triển một bố cục. Mặc dù còn có nhiều khung khác cũng có thể được sử dụng trong bố cục nhưng những khung ở trên là những khung căn bản nhất mà mọi website cần phải có.

Dựa vào những thông tin có được từ đầu đến giờ, bây giờ chúng ta sẽ làm thế nào để tạo ra một bố cục nền cho cho khách hàng của bạn? Bây giờ là lúc bàn về Thuyết Đường Kẻ Ô (Grid Theory)

Thuyết Đường Kẻ Ô - Grid Theory

Khi nói về đường kẻ ô, đa số người ta đều nghĩ đến ngành kĩ sư và kiến trúc. Tuy nhiên, đường kẻ ô là một công cụ thiết yếu cho việc thiết kế đồ họa, và những công dụng của đường kẻ ô trong thiết kế website cũng đã được ưa chuộng trong những năm trở lại đây.

Sử dụng đường kẻ ô không chỉ đơn giản là chỉ làm cho các nội dung trên trang web được ngay hàng thẳng lối mà còn cân xứng theo tỉ lệ. Đây là khi mà thuyết Đường kẻ ô ra đời. Nhiều nhà nghiên cứu lịch sử nghệ thuật cho rằng Piet Mondrian, họa sĩ người Hà Lan, là cha đẻ của thiết kế đồ họa nhờ vào những cách sử dụng xuất xắc đường kẻ ô. Tuy vậy, thuyết Đường Kẻ Ô đã tác động lớn tới sự thành công của nhiều nhà nghệ sĩ trong hàng ngàn năm qua. Ý tưởng chia các yếu tố của các thành phần mở rộng thành yếu tố toán học được công bố bởi Pythagoras và các học trò của ông, những người đã định nghĩa những con số thành tỉ lệ thay vì chỉ là những con số đơn lẻ.

Các nhà toán học Pythagoreans đã quan sát thấy được một tỉ lệ toán học được tìm thấy rất nhiều trong tự nhiên tới nỗi họ cho đó là của các vị thần thánh. Họ đặt tên cho tỉ lệ này là tỉ lệ vàng (Golden ratio) hoặc là tỉ lệ thần thánh (Divine Proportion).

Một đường thằng có thể được chia ra làm 2 theo tỉ lệ vàng này bằng cách chia chiều dài của nó cho 1,62. Con số kì diệu này thực ra là 1,6180339… là một số vô tỷ thường được gọi là Phi (Φ). Để mà giải thích một cách toán học tại sao lại có con số này thì nó hơi đi lạc chủ đề và nó cũng chẳng giúp ích gì cho bạn trở thành một nhà thiết kế giỏi cả. Vì vậy tôi sẽ nói tới đây thôi. Vả lại kiến thức toán học của tôi cũng bị lụt nghề rồi.

Vậy thì tỉ lệ này có liên quan gì tới thiết kế đồ họa? Nhìn chung, những cách bố trí, xắp xếp theo các đường thẳng được chia theo tỉ lệ này đều được coi là có tính thẩm mỹ cao. Những nghệ sĩ thời phục hưng đã sử dụng tỉ lệ vàng này trong các bức vẽ, tượng điêu khắc và các kiến trúc của họ, cũng như các nhà thiết kế ngày nay cũng thường sử dụng nó trong việc tạo bố cục trang, posters, brochures và thiết kế catalogue. Tỉ lệ vàng này sẽ cho chúng ta được một hướng dẫn logic cho việc hình thành nên bố cục của ta.

Lấy bông hoa hướng dương dưới hình bên dưới đây là một ví dụ cho tỉ lệ vàng trong tự nhiên. Đường kính của nhụy hoa chính xác bằng đường kính của cả hoa, tức là cả nhụy và cánh hoa, chia cho Φ.

Luật 3 phần

Luận 3 phần chính là phiên bản đơn giản hóa của tỉ lệ vàng. Một đường thẳng được chia theo tỉ lệ vàng thành 2 phần, trong đó một phần có kích thước gần gấp đôi phần còn lại. Bằng cách chia một đoạn thành 3 phần bằng nhau, bạn có thể áp dụng được tỉ lệ vàng mà không cần đến máy tính.

Để có thể thử nghiệm nhanh một bố cục, tôi sẽ bắt đầu vẽ một vài đường kẻ ô theo luật 3 phần với giấy và bút chì. Hãy vẽ một hình chữ nhật trước tiên, sau đó chia nó ra làm 3 theo chiều dọc và chiều ngang, sau đó ở giữa mỗi đường kẻ dọc vẽ thêm một đường dọc nữa để tạo ra được 6 cột để bắt đầu làm.

Với một khung kẻ ô đơn giản như vậy, chúng ta có thể bắt đầu bố cục những nội dung của ta lên đó. Hình chữ nhật lớn nhất mà chúng ta vẽ đầu tiên đại diện cho Khung chứa mà chúng ta đã nói ở trên phần “Khung sườn trang web”. Khi sử dụng phương pháp thiết kế này, tôi thường đặt khung lớn nhất trước tiên. Thông thường khung lớn nhất là khung nội dung. Trong hình đường kẻ ô đầu tiên, tôi đặt khung nội dung vào phía dưới góc phải, chiếm 2/3 của bố cục. Tiếp theo tôi đặt khung chuyển hướng ở ô chính giữa cột bên trái ngoài cùng. Tôi đặt Khung nhận dạng ở phía trên bên trái khung nội dung, và phần hình ảnh thì nằm phía trên menu. Cuối cùng tôi nhét khung Copyright phía dưới khung nội dung, ở cột bên phải của bố cục. Kết quả chính là hình phía trên bên trái trong 4 hình ở dưới

Những bản phát thảo ban đầu này cho bạn thấy được một cách tổng quan về việc thiết lập một bố cục cho website của bạn. Không cần phải dừng lại ở đây – sự phát triển của việc thiết kế dựa trên đường kẻ ô đã tạo cảm hứng cho rất nhiều bài viết hay khác – cũng như nhiều công cụ cho việc thiết kế trên đường kẻ ô, vì vậy bạn có thể tìm đọc thêm.

Hệ thống đường kẻ ô 960 (960 Grid System)

Một trong những công cụ thiết kế bố cục website ưa thích của tôi đó là những bản mẫu và bản phác thảo của Hệ Thống Nathan Smith’s 960 Grid. Lấy cảm hứng từ các bài viết về thiết kế web của các nhà thiết kế như Khoi Vinh và Mark Boulton, hệ thống 960 Grid thực chất là một CSS framework. Độ rộng của những bản mẫu được lấy từ bài viết của Cameron Moll. Bằng cách giảm độ rộng từ 1024px xuống còn 960px, Moll đã chỉ ra được rằng con số này chia hết cho 3,4,5,6,8,10,12,15 và 16 – làm cho nó phù hợp với đường kẻ ô. Nathan đã kết hợp tất cả các ý tưởng trên vào trong một mẫu và tạo ra 3 bố cục nền: một với 12 cột, một với 16 cột và một với 24 cột. Cá nhân tôi thì thích làm việc trên bản 12 cột hơn vì nó dễ dàng chia ra làm 4 phần 3 cột, 3 phần 4 cột và 2 phần 6 cột.

Khi bạn thử nghiệm nhiều cách sắp xếp khác nhau cho bố cục của bạn, nhớ rằng hãy sử dụng những cột của các đường kẻ ô như một thước kẻ thẳng hàng cho các khung của bạn. Việc sắp xếp tất cả nội dung của bạn trong cùng một hoặc 2 ô là rất lôi cuốn nhưng đây là điều mà bạn nên tránh – vì nó thật sự là không có tính thẩm mỹ cao. Thay vào đó hãy thử đưa một vài phần sang một cột khác hoặc là ra khỏi hẳn khung đường kẻ ô. Một trong những phàn nàn lớn nhất của những người mới thiết kế web khi sử dụng đường kẻ ô là trông nó quá “đóng hộp” và cứng ngắc. Đối với những người có lí do như vậy thì hãy xem những website như 10K Apart ở bên dưới. Những cột màu đỏ bạn thấy chính là những cột trong bản mẫu 16 cột của Hệ thống 960 Grid và nó không hiển thị trên website ở ngoài. Khi mà ko thấy được những cột này thì bạn chắc hẳn sẽ không bao giờ nhận ra được rằng thiết kế này được dựa trên đường kẻ ô.

Trích dẫn lời của Josef Muller-Brockmann, người tiên phong trong thiết kế đồ họa ( tác giả của cuốn sách Grid System in Graphic Desgin): “ hệ thống đường kẻ ô chỉ là một công cụ hỗ trợ, không phải là một đảm bảo cho sự thành công. Nó được sử dụng theo nhiều cách khác nhau và mỗi nhà thiết kế có thể tự tìm cho mình một giải pháp phù hợp với phong cách của mình. Nhưng mọi người cần phải học sử dụng đường kẻ ô; nó là một nghệ thuật đòi hỏi sự luyện tập.”

Càng dành nhiều thời gian cho cấu trúc, đường kẻ ô và một bố cục tỉ lệ lý tưởng, nó sẽ càng thấm sâu vào bản năng con người của bạn. Một bố cục “trông không có vẻ ổn lắm” thường có thể được sửa lại bằng cách di chuyển hoặc thay đổi kích thước của các yếu tố trên hệ thống đường kẻ ô. Vậy nên nếu một bố cục chưa thật sự tốt, hãy tiếp tục thử nghiệm. Tới một lúc nào đó tất cả các mảnh giép sẽ dính lại với nhau và tiếng “bing bong” sẽ vang lên trong đầu bạn. Bạn sẽ đạt được sự cân bằng.

Những bố cục được sử dụng nhiều nhất

Hầu hết những vấn đề chúng ta đã nói qua từ đầu đến giờ chỉ là lý thuyết. Lý thuyết cũng có ích của nó, nhưng nó chỉ giúp cho ta đi được một phần thôi. Chặng đường còn lại sẽ là các ví dụ và bài tập thực tế, mà theo ý kiến của tôi thì chúng có lợi hơn lý thuyết rất nhiều. Hầu hết các lớp thiết kế đồ họa chính thống đều bao gồm nhiều kiến thức liên quan về lịch sử nghệ thuật và mỹ nghệ. Những lớp này cung cấp một nền tàng vững chắc về sự thấu hiểu thiết kế đồ họa từ khía cạnh nghệ thuật, nhưng nó lại không trang bị cho bạn những kiến thức thực tế để bạn có thể đương đầu với công việc thiết kế web sau này.

Pablo Picasso đã từng nói rằng: “tôi luôn làm những việc mà tôi không thể làm, vì nó giúp cho tôi học hỏi được làm cách nào để có thể làm được những việc đó”. Nhưng đối với việc thiết kế web thì tôi khuyên bạn nên cần nắm rõ khả năng của bạn trước tiên. Khi bạn lướt web bạn có thể thấy được rằng việc thiết kế một bố cục là vô tận nhưng chỉ một vài cách là phù hợp với mục tiêu của web. Đó là lí do tại sao ta thường gặp đi gặp lại một vài mô hình chung.

Ở phần này ta sẽ bàn về 3 bố cục thông dụng nhất và coi xem điểm mạnh và điểm yếu của từng bố cục là gì.

Thanh chuyển hướng nằm bên trái (Left-columm Navigation)

Bất kể là chúng ta đang nói về thiết kế linh hoạt hay cố định, Mô hình left-columm navigation là mô hình tiêu chuẩn tiết kiệm thời gian nhất. Bố cục website của Porsche ở hình bên dưới là ví đụ điển hình nhất cho mẫu này. Nhiều website khác sử dụng mẫu này không nhất thiết phải luôn luôn để thanh chuyển hướng ở bên cột trái – đôi khi bạn sẽ thấy thanh chuyển hướng nằm phía trên trang – nhưng điểm chung là chúng luôn chia bố cục nội dung thành một cột nhỏ bên trái (1/3 hoặc ít hơn) và một cột lớn bên phải. Đây là một phương án an toàn nhất, giống như một chiếc áo thun thoải mái có 2 lỗ ở 2 bên nách mà bạn thương mặc mỗi tuần 1 lần – mặc dù vợ của bạn ghét cay ghét đắng nó. Vì những lí do trên, mẫu này là lựa chọn an toàn nhất cho hầu hết các dự án.

Điểm hạn chế của mẫu này là nó thiếu đi sự sáng tạo. Nó đã được sử dụng hàng trăm lần, hàng trăm kiểu qua nhiều năm trời liền mà vẫn trông giống nhau. Đó là còn chưa nói bạn nên tránh hẳn mẫu này. Ước lượng rằng khoảng 75% thiết kế của tôi đều có một thanh chuyển hướng phụ ở bên trái, nhưng tôi cố gắng kết hợp với nhiều mẫu khác nhau khi có thể.

Thanh chuyển hướng nằm bên phải (Right-columm Navigation)

Nếu bạn có ý định giới hạn phần nội dung của bạn vào một bên của page thì lựa chọn sáng suốt là nên đặt thanh chuyển hướng, quảng cáo và nội dung phụ vào phía bên phải. Đây là mẫu thông dụng cho các trang web tin tức, mạng xã hội và những website có thành chuyển mở rộng mà không thể gộp chung vô một thanh chuyển hướng trên đầu trang. Trang web BlueCross BlueShield of South Carolina là một ví dụ điển hình cho mẫu này. Nó tô màu và bố cục từng phần khác nhau. Bức ảnh chụp màn hình ở hình bên dưới là hình chụp ở trang thứ 4 của web – có nghĩa là bạn phải click chuột 4 lần tính từ trang chủ. Bằng việc để thanh chuyển hướng phụ bên phải, nó không làm vướng mắt người truy cập, những người đang tìm kiếm những nội dung rất cụ thể khi mà họ vào sâu như vậy.

Suy cho cùng, việc đặt thanh chuyển hướng bên trái hay phải còn tùy thuộc vào lượng nội dung mà bạn đưa lên. Nếu là một trang có nội dung đơn giản không đòi hỏi phải có một thanh chuyển hướng phụ thì hãy cân nhắc một bố cục đơn giản không có cột bởi vì một thiết kế tốt là một thiết kế thiên về đơn giản hơn là phức tạp. Nếu bạn thật sự cần một cột phụ thì hãy luôn nhớ rằng khung nội dung mới chính là thứ mà người truy cập vô website của bạn … và hơn nữa họ thường nhìn từ bên trái qua.

Thanh chuyển hướng 3 cột (three-columm Navigation)

Một mẫu three-columm Navigation tiêu chuẩn có một cột lớn ở giữa được kẹp bởi 2 cột chuyển hướng nhỏ hơn 2 bên. Web The ThinkGeek ở hình bên dưới là một ví dụ cho mẫu này. Mặc dù 3 cột là điều cần thiết cho những website có số lượng chuyển hướng nhiều và lượng nội dung ít, thì những khoảng trống là điều cần có vì nó giúp cho bố cục tránh được sự rối mắt.

Tìm kiếm niềm cảm hứng

Không nên bị bó buộc trong 3 bố cục như trên chỉ vì nó mang tính phổ biến. Có hàng đống những cách thiết kế website khác nhau đã được sáng tạo ra và những ý tưởng sáng tạo này sẽ giúp cho bạn suy nghĩ thoáng hơn. Bạn có thể tham khảo những trang web sau:

Unmatched Style tại http://unmatchedstyle.com/

Có rất nhiều những thư viện CSS tốt mà bạn có thể tìm thấy. Trang web này có tính chọn lọc hơn rất nhiều so với những trang khác, và những video và những buổi nói chuyện cũng thú vị hơn rất nhiều.

CSS Drive tại http://cssdrive.com/

Giống như unmatched Style, Css Drive là một thư viện CSS. Điểm khiến cho trang này độc dáo là họ làm rất tốt trong việc phân loại các trang theo chức năng màu sắc và bố cục.

Design Meltdown tại http://designmeltdown.com/

Từ năm 2005 đến 2009, Patrick McNeil đã thu thập và phân loại hàng ngàn mẫu thiết kế website thú vị. Ông đã xuất bản 2 cuốn sách và website này tiếp tục là một nguồn cảm hứng tuyệt vời.

Pattern Tap tại http://patterntap.com/

Không giống như 3 trang web ở trên, Pattern Tap là một thư việc của các mô hình giao diện. Tại đây bạn có thể tìm thấy được những bộ sưu tập về mẫu thanh chuyển hướng, mẫu liên hệ, đánh số, tabs và còn nhiều nữa.

Yahoo Design Pattern Library tại http://developer.yahoo.com/ypatterns/

Cũng giống như Pattern Tap nhưng web này có nhiều hơn về những mẫu ví dụ và sự đa dạng. Trang web là nơi lý tưởng để học về các yếu tố giao diện người dùng chuẩn.

Sử dụng một file lưu trữ

Tôi biết lúc này bạn đang nghĩ: “Tuyệt, bây giờ tôi có hàng đống thư viện, hình ảnh rồi – làm gì nữa đây?” Một trong những mẹo hữu dụng nhất mà một người thầy về thiết kế đồ họa đã dạy tôi là hãy tạo cho riêng mình một file lưu trữ bất cứ khi nào mà tôi tim được một nguồn cảm hứng nào đó. Cách làm rất đơn giản: Nếu bạn đang vẽ một bức tranh hoặc làm một dự án marketing có liên quan đến tàu lửa, hãy chọn và in ra bất cứ gì mà bạn thấy có thể sử dụng làm nguồn sau này vào một folder. Như vậy bất cứ khi nào bạn làm một dự án có liên quan đến tàu lửa, bạn sẽ luôn luôn có thật nhiều nguồn để tham khảo.

Ý tưởng file lưu trữ này lướt qua đầu tôi một vài năm trước khi tôi đang tìm kiếm trong một trang thư viện mà tôi thích nhưng tôi lại không thể nhớ được tên địa chỉ website của nó. Tất nhiên truy cập vào được nhiều nguồn tham khảo thì rất tốt nhưng nó cũng sẽ vô dụng nếu bạn không tìm ra được một ví dụ cụ thể mà bạn đang muốn tìm. Đó là khi tôi bắt đầu tạo dựng một file lưu trữ cho riêng tôi. Từ sau đó trở đi tôi sử dụng một chương trình là LittleSnapper trên Mac, chương trình giúp tôi có thể chụp ảnh được một phần hoặc thậm chí là nguyên cả một page (không còn cảnh kéo, chụp, kéo, chụp nữa). LittleSnapper còn cho phép bạn đặt tên và tiêu đề cho mỗi bức hình bạn chụp để có thể dễ dàng tìm kiếm sau này. Tất nhiên là còn rất nhiều cách để chụp hình lại cho file lưu trữ của bạn bất kể bạn đang sử dụng hệ điều hành nào. Việc có được một file lưu trữ mà bạn có thể tham khảo bất cứ khi nào bạn cần tìm nguồn cảm hứng sẽ rất có ích trong vô vàn trường hợp.

Mẹo: Chụp màn hình cho file lưu trữ của bạn
1. Chọn một trình duyệt web để mở trang bạn muốn chụp
2. Chụp ảnh màn hình trình duyệt web:
* Đối với máy tính, ấn phím Alt+Print Screen hoặc có thể sử dụng Snipping Tool (trong win Vista và win 7) để chụp màn hình.
* Đối với Mac, ấn phím Shift+Command+4. Sau đó ấn Space để chuyển con trỏ chuột thành một máy chụp hình. Giữ phím Ctrl và click vào trên trình duyệt web.
3. Làm tới đây bạn sẽ có được một bức ảnh chụp được save lại trong clipboard rồi, Mở một file document trong chương trình thiết kế của bạn và paste bức ảnh vào
4. Lưu lại

Những xu hướng mới

Nếu bạn cảm thấy bị “bội thực” với những nguồn tham khảo trên hoặc file lưu trữ không còn đủ sức để tạo cảm hứng nữa thì hãy dành ra vài phút để lướt qua một vài trang web sau đây. Hãy nhìn qua những màu sắc và thiết kế hình thành nên bố cục, và cố nắm được những ý tưởng và xu hướng thiết kế tiêu biểu. Bằng cách này, tôi đã bắt đầu thấy được một vài xu hướng đang nổi lên trong những bố cục website hiện nay.

Navigationless Magazine Style

Nếu bạn đang đọc đoạn này thì tôi đoán chắc rằng bạn không có đọc qua phần mục lục rồi. Đối với một website, ta thường tập trung nhiều hơn vào việc định hướng mục tiêu và cách sắp xếp các thông tin khách hàng sao cho rõ ràng. Vì vậy thanh chuyển hướng giúp cho website được nhanh chóng, hiệu quả và dễ dàng định vị hơn. Nhưng nếu như bạn không muốn người truy cập nhảy trang thì sao? Nếu những thông tin mà bạn đưa lên trang phải được trình bày như một tổng thể chung nhất, như môt cuốn sách hoặc một bài viết trên tạp chí thì sao? Nếu như trường hợp là như vậy thì tại sao phải có thanh chuyển hướng? Đây chính là cách mà Design Informer làm với những bài viết nghệ thuật của mình, không có bất kì một liên kết chuyển hướng nào trong mỗi trang bài viết cho tới khi bạn kéo xuống tận cùng dưới phần comment. Bạn nghĩ chỉ có mỗi website này là làm như vậy thôi ư? Hãy coi các ví dụ khác ở hình bên dưới, website Bold Italic và Weeks of UX.

Phần Footer mở rộng

Đây không hẳn là một xu hướng mà đúng hơn là một hiện tượng đang nổi. Tôi đã từng đề cập đến phần Footer mở rộng này ở phần trên và nó tiếp tục phát triển cho tới bây giờ, trong cả nội dung lẫn hình thức. Thay vì chỉ sử dụng Footer cho nhưng liên kết cần thiết và bảng hiệu copyright, nhiều trang đã sử dụng khung “nhìn một lần rồi thôi” này để chứa cả những thông tin liên hệ, thanh chuyển hướng mở rộng, và các nội dung truyền thông. Mặc dù để những thông tin quan trọng như vậy vào cuối trang là một ý tưởng không hay cho lắm nhưng nó lại là một giải pháp hữu hiệu. Một ví dụ tiêu biểu cho xu hướng này là trang FortySeven Media. Một vài ví dụ nữa bạn có thể tham khảo như mozilla.com, creamycss.com và sitepointl.com.

Minimalist Design - Phong cách thiết kế đơn giản hóa

Tương tự với Phong cách tạp chí không có thanh chuyển hướng và hơi trái ngược với kiểu Footer mở rộng, nhiều trang đã và đang lược bỏ bớt nhiều phần nội dung tiêu chuẩn của website. Sự đơn giản này là việc giảm thiểu tối đa thiết kế của bạn xuống chỉ còn những yếu tố quan trọng nhất. Ở hình bên dưới, Anolog Coop đã làm được điều này khi giảm bớt nội dung thành một trang đơn và rất thú vị. Với trang Kha Hoang, sự đơn giản đến bởi trang chủ giản dị chỉ với vài hình liên kết, một câu châm ngôn về thiết kế và một vài thông tin liên hệ. Đây là một cách đơn giản để có thể áp dụng; chỉ cần lướt một lượt qua từng yếu tố của từng trang và tự hỏi mình nó có tác dụng gì vào trang này. Nếu bạn không trả lời được thì hay loại nó ra.

Chủ nghĩa đơn giản này không phải là một xu hướng mới – cho dù trong thiết kế web. Trong giới nghệ thuật, chủ nghĩa đơn giản là một hành động để phản ứng lại sự thể hiện bản thân thái quá của chủ nghĩa biểu hiện. Tương tự như vậy, sự bùng nổ của chủ nghĩa đơn giản và kiểu thiết kế một trang đơn trong thiết kế website là một phản ứng lại sự tương tác quá mức của kỉ nguyên web 2.0. Nó như một động thái để cân bằng lại sự hối hả và nhộn nhịp của các phương tiện truyền thông xã hội với sự yên bình của một quán cà phê hoặc một thư viện nghệ thuật tĩnh lặng.

Fixed, Fluid, hoặc Responsive Layout

Quay trờ lại khi mà chúng ta đang vẽ khung đầu tiên cho bố cục của ta với giấy và bút chì. Tôi đã giải thích về hình chữ nhật ngoài cùng mà các thiết kế của chúng ta đều nằm trong đó chính là khung chứa. Trong thiết kế in ấn, khung chứa thường là một vật thể như danh thiếp hoặc bảng quảng cáo. Đối với website, khung chứa của ta ở đây chính là khung cửa sổ trình duyệt web. Một thiết kế nên chiếm chọn cả khung trình duyệt hay nó chỉ nên có một độ rộng nhất định? Quyết định này đã làm khó khăn cho biết bao nhà thiết kế web trong suốt hàng trăm năm qua, nếu không nói là hàng ngàn năm qua – trong thời kì mà ta sử dụng bảng và spacer.gif để thiết kế các bố cục của web. Đúng không hẳn là hàng ngàn năm – tôi làm quá lên thôi – nhưng nó cũng là một cuộc tranh cãi dài hạn không có hồi kết.

Fixed Width - Bố cục có độ rộng cố định

Nếu bạn bắt đầu bố cục của bạn sử dụng chương trình 960 Grid mà tôi đã đề cập ở phía trên chương thì có cơ may là bạn sẽ thiết kế nên một bố cục có độ rộng cố định. Những thiết kế này thường có một độ rộng cố định (thường là 960 pixels) và được căn vào chính giữa nhờ margin auto. Nếu cửa sổ trình duyệt rộng hơn 960 pixels, bạn sẽ thấy được phần nền được dư ra phía bên phải và trái của khung chứa; và nếu nó nhỏ hơn thì bạn sẽ thấy các thanh cuộn được xuất hiện. Những bố cục có độ rộng cố định thường dễ thiết kế và bảo trì hơn vì bạn sẽ xây dựng nên một bố cục giống như là lúc bạn thiết kế trong photoshop. Hình bên dưới cho một bố cục được thể hiện dưới cả hai dạng cố định và linh hoạt.

Fluid Width - Bố cục có độ rộng linh hoạt

Một bố cục có độ rộng linh hoạt được thiết kế với độ rộng dựa trên tỉ lệ phần trăm giữa các phần để mà khung chứa có thể dãn ra khi bạn thay đổi kích thước của cửa sổ trình duyệt. Cách này tốn nhiều công sức hơn trong việc thiết kế vì bạn phải tiên đoán trước được mọi vấn đề có thể xảy ra với mỗi độ rộng khác nhau. Đôi khi tỉ lệ phần trăm sẽ khớp với độ rộng của các cột nhưng điểm mấu chốt ở đây là làm sao để hiển thị nhiều nội dung nhất có thể vừa với màn hình của người truy cập. Thông thường là những bố cục có độ rộng linh hoạt thường sẽ đạt hiệu quả với min-width và max-width của CSS, đảm bảo được khung chứa không bị quá rộng hoặc quá nông.

Một lí do làm cho một vài nhà thiết kế không thích sử dụng độ rộng linh hoạt vì họ nghĩ sẽ khó sử dụng trong khung kẻ ô. Có một vài nguồn mẫu về thiết kế độ rộng linh hoạt dựa trên khung kẻ ô, bao gồm cả fluid adaptation trong 960 Grid. Nhưng sau cùng thì việc sử dụng kiểu thiết kế nào đi chăng nữa cũng còn tùy thuộc vào nhóm đối tượng mà chúng nhắm tới và mục tiêu cụ thể của từng website. Những mặt tốt và hạn chế của từng kiểu được liệt kê ở bảng sau:

Tốt

Hạn Chế

Độ rộng cố định

Giúp người thiết kế dễ hình dung được thiết kế của họ sẽ trông như thế nào

Cho phép sử dụng triệt để khung trống

Cải thiện tính trực quan của các ô văn bản hẹp

Nhìn có thể bị nhỏ lại trong cửa sổ trình duyệt lớn

Không cho người truy cập được quyền kiểm soát

Độ rộng linh hoạt

Thích ứng với hầu hết độ phân giải của màn hình và thiết bị

Giảm việc phải sử dụng thanh cuộn của người truy cập

Khó đọc khi văn bản bị kéo dãn ra

Khó để làm được một thiết kế thành công

Không tận dụng được khoảng trống

Nhớ được những mặt tốt và hạn chế này, tôi đã thiết kế sử dụng độ rộng cố định nhiều hơn là linh hoạt. Tôi muốn kiểm soát được nội dung sẽ được thể hiện về mặt hình ảnh như thế nào và có thể tận dụng được khoảng trống nền. Nhưng mặt khác đôi khi tôi cũng muốn tận hưởng những thử thách mới lạ với những bản thiết kế linh hoạt. Nhưng hãy đừng ưu tiên ý kiến cá nhân của mình quá mà phải nên ưu tiên ý kiến của khách hàng trước đã. Cho dù thiết kế nào đi nữa, bạn cũng phải nghĩ tới nhóm đối tượng người truy cập mà bạn nhắm tới, và tạo ra một thiết kế phù hợp với mong muốn của nhóm đối tượng đó.

Một lựa chọn hiệu quả: Responsive Layout

Người ta thường nói rằng bất cứ luật nào cũng có ngoại lệ. Điều này thường đúng trong ngành website và nhiều nhà thiết kế đã nghĩ ra mô hình bố cục biến thể và lai tạo giữa hai bố cục cố định và linh hoạt. Tôi đã từng đọc một bài viết liệt kê ra hẳn 10 dạng bố cục khác nhau. Tuy nhiên vì mục tiêu của chương này, đa số các loại được liệt kê đều là cố định và linh hoạt. Một bài viết gần đây trên trang A List Apart đã giới thiệu một loại bố cục hoàn toàn mới mà tôi đã thấy được áp dụng nhiều. Bài viết được đặt tên là “Responsive Web Design” và nó được viết bởi Ethan Marcotte.

Thay vì nhắc lại cả bài viết ở đây, tôi khuyên các bạn nên tìm và đọc nó. Ý tưởng này được hình thành khi mà thị trường điện thoại di động khiến cho kích cỡ độ rộng trình duyệt ngày càng phức tạp, vì vậy sự cần thiết có một bố cục linh hoạt và thích ứng được với nhiều độ rộng khác nhau là hơn bao giờ hết. Kĩ thuật này lấy những điểm mạnh từ các bản thiết kế linh hoạt và các câu hỏi khảo sát CSS3 để thay đổi hoàn toàn một bố cục mới. Hình bên dưới cho thấy những hình chụp màn hình thiết kế của Ethan ở 3 độ rộng khác nhau.

Thiết kế web Responsive của Ethan là một giải pháp tối ưu cho một vấn đề mà chúng ta vẫn chưa bàn tới : Độ phân giải màn hình.

Độ phân giải màn hình

So sánh với sự tranh cãi về linh hoạt hay cố định, sự tranh luận về việc thiết kế cho một độ phân giải màn hình nhất định thì không được sôi nổi bằng trong những năm qua. Khi một nhà thiết kế nói rằng một trang được thiết kế, hoặc được tối ưu hóa, cho một độ phân giải nhất định thì chắc chắn họ đang nói về độ phân giải trên màn hình của người sử dụng. Trong quá khứ, những tranh luận về độ phân giải màn hình tập trung vào việc những bản thiết kế có vẫn cẩn phải thích nghi với độ phân giải 800x600 mà không hiện thanh cuộn hay không.

Ngày nay, một sự thật hiển nhiên là màn hình được để độ phân giải 1024x768 là tối thiểu. Ngay cả phần lớn của các máy tính netbook cũng có độ phân giải từ 1024x600 trở lên. Vì lí do đó, 960 pixels đã trở thành một độ rộng tiêu chuẩn cho đa số các dự án thiết kế website. Với báo cáo của W3Schools, sự tăng trưởng của những người dùng có độ phân giải lớn hơn 1024 ngày càng tăng, chắc hẳn bạn sẽ nghĩ chúng tôi sẽ đẩy tiêu chuẩn độ rộng lên vượt 960 pixel, nhưng có một vài lí do mà điều này không xảy ra. Đầu tiền là hầu hết những người có một màn hình độ phân giải lớn vẫn thường giữ độ phân giải của họ dưới 1024 pixels để họ có thể thấy được những cửa sổ ứng dụng khác đang chạy của họ. Một lí do khác là độ dài. Nếu một đoạn văn bản có độ dài quá dài nó sẽ bị khó đọc hơn. Vì vậy, sự tăng lên về tiêu chuẩn độ rộng chỉ duy nhất cho chúng ta được thêm nhiều cột hơn mà thôi.

Mặc dù những số liệu thống kê của W3Schools chỉ ra được việc sử dụng bố cục 960 pixels là hợp lý nhưng nó đã bỏ quên đi mất một mảng rất quan trọng của số lượng người lướt web: đó chính là những người sử dụng điện thoại. Trích dẫn một đoạn trong cùng một bài viết mà tôi đã đề cập tới ở phần Responsive Web Design số lượng truy cập bằng điện thoại được đánh giá sẽ vượt qua số lượng sử dụng máy tính trong vòng 3 tới 5 năm. Với sự tăng trưởng về độ phân giải màn hình điện thoại và càng ngày điện thoại càng bắt kịp người anh em máy tính của nó thì có thể nói rằng thiết kế web của bạn sẽ được đọc trên những thiết bị điện thoại. Vì vậy bạn nên cân nhắc việc kiểm tra thiết kế web của bạn trên cả các thiết bị điện thoại.

Việc số lượng người sử dụng điện thoại ngày càng được coi trọng khi mà đa số các nhà thiết kế web đang cung cấp một phiên bản tối ưu hóa trên điện thoại cho các trang của họ; điều này hiển nhiên có nghĩa rằng sẽ có nhiều khách hàng sẽ đòi hỏi có được một trang tối ưu hóa trên điện thoạt như vậy. Việc này từng là một công việc phức tạp với những ngôn ngữ lập trình đặc biệt trên điện thoại như WML và những trình duyệt web tệ hại như RIM OS của Blackberry.

May mắn thay, việc thiết kế một trang tối ưu hóa trên điện thoại ngày nay thiên nhiều hơn về việc cải tiến bố cục để có thể hiển thị trên màn hình điện thoại đồng thời tận dụng những tính năng hỗ trợ của OS để làm cho nó bắt mắt. Mặc dù những chi tiết kĩ thuật về việc thiết kế một trang tối ưu hóa trên điện thoại không nằm trong mục tiêu của cuốn sách này nhưng những nguyên tắc về bố cục và những lý thuyết về thiết kế được nói tới trong phần còn lại của chương sẽ vẫn có thể áp dụng được. Suy cho cùng thì bất kể bạn thiết kế gì đi chăng nữa thì đối tượng và mong muốn của khách hàng vẫn sẽ luôn là mục tiêu quyết định của bạn.