Bố cục và cách trình bày

Trang chủ » Tư vấn »Tư Vấn» Để có một website hiệu quả» Bố cục và cách trình bày

Ngày tạo: 08/01/2015

Bố cục và cách trình bày

Đối với nhiều nhà phát triển webs, bao gồm cả tôi, thì phần khó khăn nhất trong quá trình thiết kế là bước khởi đầu. Hãy cứ tưởng tượng khi mà bạn ngồi đó, ngay tại bàn làm việc của mình chỉ với một tách cà phê và danh thiếp của một khách hàng tiềm năng đang cần một website cơ bản cho doanh nghiệp. Thông thường thì danh thiếp đã cung cấp đầy đủ những thông tin cần thiết về công ty và có thể sử dụng những thông tin đó để làm ý tưởng thiết kế.

Đáng tiếc rằng điều đó thì không đúng trong trường hợp của Smith’s Service ở hình 1.1 dưới đây. Danh thiếp không có gì ngoài nền trắng chữ đen, chữ bình thường, không in đậm, vân vân… giống như là một miếng vải trắng vậy. Vậy bạn phải bắt đầu từ đâu đây? Bạn cần một kế hoạch … và bạn cần phải liên lạc với ông Smith. Với những thông tin được cung cấp trực tiếp từ khách hàng về công việc mà công ty của họ đang làm kết hợp với những thông tin thu được từ nội dung mà bạn phải thực hiện, bạn sẽ có thể nghĩ ra được một bố cục và một thiết kế thành công.

Hình 1.1

Ai ai bất kể trình độ nghệ thuật tới đâu, cũng có thể nghĩ ra được một bản thiết kế tốt và đẹp – tất cả những gì bạn cần là một chút kinh nghiệm và kiến thức căn bản về những nguyên tắc bố cục. Hãy bắt đầu với những điều căn bản trước, và sau đó bạn sẽ có một nền tảng cần thiết để thiết kế được những website chất lượng.

Quá trình thiết kế

Nếu bạn yêu cầu tôi thiết kế một cây cầu, tôi sẽ có rất nhiều câu hỏi để hỏi bạn. Nó chỉ dài bằng sân trước nhà bạn hay dài bằng cả hồ Pontchartrain? Tôi có thể sử dụng bê tông và thép không hay toàn bộ cây cầu được xây bằng đũa? Tôi chắc chắn sẽ dừng lại để lấy danh thiếp của bạn ngay tại quán bar và hứa với bạn đủ điều trước khi tôi biết bạn là ai và tại sao bạn nghĩ bạn cần nó. Mặt khác, nếu bạn yêu cầu tôi tạc cho bạn một bức tượng để trong vườn nhà bạn, tôi có lẽ sẽ toàn tâm toàn lực bắt tay vào việc sáng tạo ra một tác phẩm nghệ thuật độc nhất vô nhị.

Quá trình thiết kế website rơi vào khoảng giữa của việc thiết kế cây cầu và tạc một bức tượng như ở trên. Đúng vậy, chúng tôi muốn tạo ra một website riêng biệt vừa đáp ứng được yêu cầu thẩm mĩ vừa đúng yêu cầu của khách hàng. Những yêu cầu này đôi khi rất cao xa và phức tạp, hoặc cũng có thể nó chỉ là làm sao cho thông tin luôn được sẵn sàng. Nếu chúng tôi không lắng nghe khách hàng một cách cẩn thận, toàn bộ dự án sẽ thất bại, kéo luôn cả danh tiếng của chúng tôi nữa. Những chi tiết kĩ thuật về phát triển, hosting, và bảo trì một website hoặc một ứng dụng có thể sẽ rất, bạn biết đấy, phức tạp. Quá trình hình thành một dự án thiết kế thì rất phức tạp, tuy nhiên có thể rút gọn xuống còn 3 nhiệm vụ chính: Tìm hiểu, Khám phá và Triển khai.

Tìm hiểu

Yếu tố tìm hiểu trong quá trình thiết kế là quá trình gặp gỡ khách hàng và làm sao để hiểu rõ được những gì họ làm. Nghe có vẻ không giống như công việc thiết kế cho lắm nhưng thu thập thông tin về khách hàng sẽ giúp cho bạn dễ dàng có được một bản thiết kế phù hợp và hiệu quả.

Trước khi gặp gỡ khách hàng bạn nên bỏ chút thời gian nghiên cứu về công việc kinh doanh của họ. Nếu họ yêu cầu bạn thiết kế một website thì chắc hẳn họ chưa có wensite rồi, nhưng cứ google thử xem. Nếu bạn không thể tìm thấy thông tin gì về công việc kinh doanh cụ thể của họ, cố gắng nghiên cứu về lĩnh vực kinh doanh mà họ đang làm. Nếu có thể, nên gặp trực tiếp ở cuộc hẹn đầu tiên. Đôi khi vì lí do khoảng cách, cuộc hẹn sẽ phải thông qua điện thoại nhưng nếu khách hàng của bạn ở trong thành phố, hãy cố gắng lên lịch gặp trực tiếp.

Hãy nhớ rằng ở cuộc hẹn đầu tiên không nên cố gắng gây ấn tượng với khách hàng, cố gắng bán cho được website mà thay vào đó hãy nói chuyện, và nêu ra được rõ ràng khách hàng muốn gì. Cố gắng lắng nghe nhiều hơn là nói, và mang theo một vài tờ giấy để ghi chú lại. Nếu bạn mang theo laptop hoặc tablet để có thể cho khách hàng xem mẫu thì nên hạn chế thời gian sử dụng nó. Vì máy tính thì có màn hình, mà người ta thì có thói quen là chăm chú nhìn vào màn hình. Do đó, nếu như không phải là khách hàng của bạn cứ chăm chú nhìn vào màn hình suốt buổi thì bạn cũng sẽ nhìn khi mà bạn phải ghi chú lại. Nếu miễn cưỡng phải mang theo “công nghê” tới buổi gặp thì nên sử dụng chương trình như iTalk của iPhone hoặc Voice Recorder của Android để thu âm lại cuộc trò chuyện – tất nhiên là phải được sự cho phép của khách hàng. Theo kinh nghiệm của bản thân tôi thì một vài tờ giấy là phương án tốt nhất, ít gây sao lãng nhất cho bạn và khách hàng.
Mẹo: Không nhất thiết cuộc gặp gỡ với khách hàng tại văn phòng làm việc

Ngay cả tôi khi đang làm việc cho một công ty có văn phòng làm việc thật rộng rãi thì vẫn thấy là gặp gỡ khách hàng ở quán cà phê hoặc lúc ăn trưa sẽ hiệu quả hơn rất nhiều. Những điều này còn phụ thuộc vào khách hàng của bạn có đồng ý hay không nữa. Nếu khách hàng của bạn trông có vẻ hơi nghiêm túc thì bạn không nên đề nghị việc này. Còn lại đa số những trường hợp khác thì gặp gỡ một cách riêng tư thoải mái hơn một chút là một cách tốt.

Sau đây là một vài câu hỏi mà thông thường tôi sẽ hỏi khách hàng trong cuộc gặp đầu tiên này, cho dù là những câu hỏi đó tôi đã tìm trên mạng được rồi:

1.Công ty của ông làm gì?

2.Vai trò của ông trong công ty là gì?

3.Công ty của ông có logo hay tên thương hiệu không? Mục tiêu mà ông nhắm tới khi phát triển một website là gì?

4.Những thông tin nào ông muốn sẽ được đưa lên web?

5.Đối tượng khách hàng của bạn là gì? Nhóm đối tượng đó có đặc điểm chung nào không, chẳng hạn như độ tuổi, giới tính hoặc nơi ở?

6.Đối thủ cạnh tranh của công ty ông là ai? Họ đã có website chưa?

7.Ông có mẫu những website mà ông thích hoặc không thích không?

8.Dự án này ông muốn chạy trong thời gian như thế nào và ông có thể đầu tư bao nhiêu vào dự án này?

Nếu dự án là thiết kế lại một trang website có sẵn thì tôi thường hỏi những câu như là:

1.Những người vào website của ông thì thường tìm kiếm những gì?

2.Những vấn đề mà trang web hiện tại đang gặp phải?

3.Ông mong muốn đạt được điều gì khi tái thiết kế lại website của ông?

4.Có đặc điểm nào ở website này mà ông muốn giữ lại không?

5.Ông nghĩ những người truy cập vào website của ông sẽ phản ứng như thế nào với một thiết kế mới?

Đôi khi tôi cũng hỏi thêm nhiều những câu hỏi khác không nằm trong những câu ở trên. Hãy sử dụng trí tưởng tượng của bạn để nghĩ ra thêm nhiều câu hỏi nhằm hiểu rõ hơn công ty của khách hàng. Nếu bạn là một lập trình viên, tránh nói những từ ngữ chuyên ngành khó hiểu. Nếu bạn là một nhà thiết kế, tránh nói cụ thể về công việc thiết kế của bạn. Tất nhiên nếu bạn là một nhà thiết kế thì bạn hầu như sẽ nghĩ đến những điều đó, nhưng bạn phải biết là những từ như semantic makeup, fluid and fixed layouts, color schemes… chẳng có nghĩa lí gì với khách hàng cả, đơn giản là vì họ không hiểu. Tệ hơn nữa là những cuộc nói chuyện kiểu như vậy sẽ làm cho bạn bị lạc hướng thiết kế trước cả khi bạn bắt đầu.

Khám phá

Giai đoạn tiếp theo này của quá trình thiết kế là khi mà bạn bắt đầu lấy những thông tin mà bạn thu thập được từ khách hàng về phân tích, mổ xẻ và thử nghiệm những ý tưởng lên nó. Cái bạn cần ở đây là sự thấu hiểu tường tận về tất cả những thông tin, những sản phẩm, dịch vụ mà khách hàng đang kinh doanh, từ đó bạn mới bắt đầu tìm tòi ra làm cách nào để những thông tin này được sắp xếp một cách phù hợp. Hãy đặt mình vào vị trí những người truy cập vào website này và tự hỏi họ muốn thấy gì. Nếu bạn đang suy nghĩ muốn mua một món hàng thì bạn cần phải biết những gì trước khi mua? Nếu bạn truy cập vào để sử dụng dịch vụ thì đâu là nơi cho bạn biết được những lời mời chào khác nhau và mức độ nào của dịch vụ mà bạn mong muốn? Tiêu đề mạch lạc nhất cho trang X là gì, và có bao nhiêu bước để qua được tới trang Y?

Trong giới thiết kế web thì đây là những bước đầu tiên trong quá trình được gọi là Cấu Trúc Thông Tin, viết tắt là IA. Đối với những website đắt tiền và những ứng dụng web phức tạp thì Cấu Trúc Thông Tin là một chuyên ngành riêng biệt, nhưng những hướng dẫn và những quy tắc của nó có thể cung cấp cho ta được một nền tảng vững chắc ngay cả cho một website nhỏ nhất. Đối với giai đoạn Khám phá này của quá trình, chúng tôi muốn tập trung vào cách sắp xếp nội dung và dòng chảy của website thành một mô hình mà chúng ta có thể thiết kế dựa trên đó.

Hai thứ tất yếu nhất mà bạn cần phải có cho công việc này là một tờ giấy trắng lớn (nếu bạn có một tấm bảng trắng thì càng tốt) và nhiều thật nhiều giấy ghi chú. Hãy làm một danh sách tất cả những phần, mục của website mà bạn muốn có và bắt đầu sắp xếp chúng thành những nhóm lớn và nhóm phụ. Những nhóm này có thể sẽ được di chuyển chỗ này chỗ khác trên website cho tới khi tìm được vị trí thích hợp, nên những miếng giấy ghi chú nhỏ nhỏ sẽ rất hữu dụng. Nếu bạn lập ra từng khu vực lớn nhỏ và từng trang của website, bạn có thể đặt chúng trên một bức tường tưởng tượng như nó là một trang web. Bạn sẽ muốn tránh làm ngộp người truy cập bởi quá nhiều lựa chọn nhưng bạn cũng không muốn chôn thông tin vào quá sâu trong trang web; hiểu cách khác là người truy cập sẽ phải click chuột nhiều lần để rời khỏi trang chủ và tiếp cận những thông tin đó. Không có một quy tắc luật lệ nhất định nào trong việc này, chỉ cần bạn làm sao cho thông tin được thể hiện một cách càng rõ ràng và dễ dàng truy cập nhất càng tốt.

Triển khai

Bây giờ thì bạn đã có ý tưởng về cách tổ chức sắp xếp thông tin như thế nào rồi. Giai đoạn Triển khai này bắt đầu với việc tạo ra một bố cục. Hãy đừng nghĩ tới dự án, cố không để những yếu tố kĩ thuật thiết kế web làm ảnh hưởng đến bạn – ít nhất là trong giai đoạn đầu tiên này. Bây giờ không quan trọng website của bạn có bao gồm HTML hay không, một mẫu cho hệ thống quản lí nội dung hoặc một ứng dụng Ruby on Rails hay không, điểm mấu chốt ở đây là chúng ta phải nhập tâm vào việc thiết kế trên một tờ giấy trắng. “Giấy ư?” Đúng vậy, trên giấy bạn à. Bạn nghĩ rằng tôi sẽ cho bạn quay lại ngồi vô cái máy tính quý báu của bạn bây giờ ư? Không đời nào. Và đây là lí do: Rất dễ bị mất tập trung thiết kế khi bạn cứ nghĩ về cái bố cục trên màn hình máy tính. Nếu sử dụng giấy, bạn có thể loại bỏ được những giới hạn về kĩ thuật của browsers và CSS và dành thời gian tập trung vào suy nghĩ bạn muốn sản phẩm cuối cùng của bạn trông ra làm sao. Nghe tới đây bạn chắc hẳn sẽ nghĩ rằng bất cứ những người thiết kế giỏi nào cũng mang theo bên mình những bản giấy phác thảo đắt tiền để họ có thể sử dụng những cây bút vẽ và cọ cũng mắc tiền không kém để thiết kế những tuyệt tác Da Vinci. Còn đối với tôi, tôi sử dụng một cuốn sổ tay 79 cent và bất cứ cây viết nào trên bàn làm việc của tôi còn viết được.

Tôi bắt đầu bằng việc phác thảo ra một vài bố cục và chọn ra một cái tôi thích nhất, đưa nó vào Photoshop, dùng công cụ Rectangle để khoanh lại vùng mà tôi đánh dấu trên giấy. Một khi đã có được bố cục, tôi bắt đầu thử màu nền trước và sau đến khi nào đạt được độ phối màu hài hòa. Tôi tiếp tục mày mò với photoshop và thay đổi các pixels cho tới khi cuối cùng, một cách kì lạ, tôi có được một bản bố cục mẫu đưa cho khách hàng.

Thật đơn giản phải không? Ừ thì đúng là tôi đã bỏ qua một vài bước để có thể có được một bản hướng dẫn ngắn ngọn như trên. Sự thật là những điều giúp tôi có thể tự tạo dựng nên một quá trình thiết kế như vậy là một bản năng, nó như một thứ tiềm thức mà tôi có được từ những kinh nghiệm trong quá khứ, từ những bạn đồng nghiệp trong ngành thiết kế và những bạn học trong lớp vẽ.

Học thiết kế cũng như là học lập trình vậy. Một vài người thì có khiếu nhưng hầu như tất cả mọi người đều có thể học được. Cũng như có code hay và code dở, chúng ta cũng có thiết kế tốt và thiết kế xấu. Bằng cách học những quy tắc, quy ước về thiết kế này sẽ giúp bạn hiểu được sự khác biệt giữa thiết kế tốt, dở, xấu và định hướng cho bạn hình thành nên quá trình thiết kế cho riêng mình.

Thế nào là một thiết kế tốt

Có 2 yếu tố chính mà đa số người ta dựa vào đó để đánh giá một thiết kế website là tốt hay dở. Thứ nhất là khía cạnh đặc biệt tỉ mỉ về việc khả năng sử dụng. Góc độ này đánh giá về chức năng, độ hiệu quả của việc trình bày thông tin và hiệu suất của nó. Thứ hai là khía cạnh thuần về tính thẩm mỹ. Khía cạnh này tập trung vào giá trị nghệ thuật và hiệu ứng hình ảnh của thiết kế. Một vài người quá tập trung vào khâu thẩm mỹ, thiết kế mà quên mất đi người dùng, trong khi một vài người khác thì lại dồn hết tâm trí vào nội dung mà quên mất đi hiệu ứng. Để có thể thỏa mãn được người dùng, một thiết kế tốt cần toàn diện về cả 2 khía cạnh.
Một điều quan trọng nhất mà bạn nên luôn luôn ghi nhớ trong đầu đó là thiết kế website cũng giống như giao tiếp vậy. Nếu bạn tạo ra một website với nội dung được trình bày tốt nhưng lại không đẹp mắt hoặc làm mất đi giá trị thương hiệu của khách hàng thì chẳng ai muốn mua cả. Cũng tương tự nếu bạn tạo một website thật đẹp mắt nhưng lại khó sử dụng cho người dùng hoặc khó truy cập, người ta sẽ bỏ đi hết. Thực vậy, những yếu tố và chức năng của một bản thiết kế website hoàn chỉnh nên hoạt động như một thể thống nhất, để cho:

Người dùng hài lòng với thiết kế và bị cuốn hút bởi nội dung

Một trong những mối lo lớn nhất của những chuyên gia về nội dung là lượng thời gian mà người dùng bỏ ra lướt qua page để tìm kiếm thông tin họ muốn; có thể là một mẩu nội dung nhỏ nào đó, một liên kết sang trang khác hoặc một mẫu đơn. Bản thiết kế không nên là một rào cản giữa người dùng và thông tin.

Nick La’s Web Designer Wall ( hình 1.2) là một ví dụ điển hình của một website toàn diện về cả 2 mặt. Những hình ảnh đẹp và đầy màu sắc chạy xung quanh cấu trúc của trang giúp tô điểm cho thanh chuyển hướng cũng như các nội dung của trang, làm nó trông như được cắt ra từ một khung giấy vẽ vậy. Sự đa dạng của những hình vẽ tay, của những yếu tố phối hợp hài hòa giúp lôi cuốn mắt của bạn vào nội dung của trang web mà không bị cản trở một chút nào.

Hình 1.2

Người dùng có thể chuyển hướng dễ dàng với thanh chuyển hướng rõ ràng.

Chúng ta sẽ nói về những vị trí của thanh chuyển hướng trong những chương sau, nhưng một thanh chuyển hướng thì nên nằm ở chỗ dễ nhìn thấy nhất trên web và mỗi liên kết nên có một tiêu đề miêu tả. Cấu trúc của một thanh chuyển hướng không chỉ nên thay đổi khi con trỏ chuột click vào mà nên chỉ ra rõ trang hiện tại, giúp cho người dùng nhận ra được họ đang ở đâu và làm sao để đi tới nơi họ muốn tới.

Thanh chuyển hướng phụ, ô tìm kiếm và những liên kết ra ngoài không nên đặt lên những nơi quan trọng trên page. Chỉ cần chúng ta đặt nó ở những nơi dễ nhìn thấy và tách biệt khỏi nội dung thì vẫn đảm bảo được người dùng tập trung vào nội dung mà vẫn biết họ sẽ nhìn ở đâu khi họ đã sẵn sàng chuyển sang nội dung khác.

Người dùng sẽ nhận ra được mỗi trang đều nằm chung trong một website

Ngay cả khi có sự khác biệt lớn giữa bố cục của trang chủ và bố cục của những trang còn lại thì luôn có một chủ đề hoặc một phong cách chung nào đó xuyên xuốt tất cả các trang để có thể kết nối các trang lại với nhau.

Hãy nhìn vào những hình chụp từ website Moore School of Business ở hình 1.4. Mặc dù những ô nội dung của trang này rất khác biệt, nó vẫn có những điểm chung về hiệu ứng để cho người dùng biết rằng chúng vẫn là cùng một website. Hầu hết những điểm chung này nằm ở phần logo và thanh chuyển hướng. Việc sử dụng màu sắc giới hạn (đen, xám, vàng, đỏ) cũng một phần làm cho những trang này thống nhất hơn.

Hình 1.4

Khung sườn cho trang 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 cầu tôi nêu ở trên cũng rất dễ dàng. 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

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ế 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 thức 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.

Khung 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.

Khung 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.

Khung phụ lục

Được đặt ở dưới cùng của website, khung phụ lục 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. Khung phụ lục 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.

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 ông Smith, và giả sử là nó có ích. Ông ta đã 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 Công ty dịch vụ của ông Smith? Bây giờ là lúc bàn về Thuyết Đường Kẻ Ô (Grid Theory)

Thuyết Đường Kẻ Ô

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). Hình 1.6

Hình 1.6

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 và brochures. 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 1.7 đâ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 Φ.

Hình 1.7

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 1.8

Hình 1.8

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 ở hình 1.9. 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.”

Hình 1.9

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.

Sự cân bằng

Nói một cách bóng bẩy thì ý tưởng Cân bằng hình ảnh cũng tương tự như cân bằng vật lí được miêu tả giống như việc chơi trò chơi bập bênh. Cũng giống như mọi vật thể đều có sức nặng, các yếu tố trong bố cục cũng có. Nếu những yếu tố ở một bên của bố cục có “cân nặng” bằng với bên còn lại thì chúng cân bằng với nhau. Có 2 dạng cân bằng hình ảnh: Đối xứng và Không đối xứng.

Cân bằng đối xứng

Cân bằng đối xứng, hay còn được biết là cân bằng chính thống, xảy ra khi các thành phần sắp xếp đối xứng nhau theo một trục nhất định. Bức vẽ kĩ thuật số Contemplation của David Lanham ở hình 1.10 mô tả chính xác định nghĩa này. Hãy chú ý cách mà hình ảnh của người đàn ông và người phụ nữ đối xứng nhau về vị trí và tỉ lệ. Ngay cả đến cái ô bóng phía sau cũng là hình ảnh phản chiếu của nhau.

Mặc dù nó có thể không được áp dụng lên tất cả các thiết kế và khách hàng, nhưng kiểu đối xứng này – được gọi là đối xứng hàng ngang – có thể áp dụng được trong bố cục của website bằng cách đối xứng các nội dung giữa các cột.

Bố cục trang chủ website cá nhân của tôi ở hình 1.11 dưới đây là một ví dụ điển hình cho đối xứng hàng ngang. Để ý rằng phần nội dung phía trên được chia làm 2 cột trong khi có tới 3 cột ở dưới, nhưng nó vẫn duy trì được tính cân bằng đối xứng.

Hình 1.11

Còn có 2 dạng cân bằng đối xứng nữa ít phổ biến hơn trong thiết kế web vì tính chất của nó. Tuy nhiên 2 dạng này xuất hiện nhiều trên logo và các thiết kế in ấn:

-Đối ứng song song: là đối xứng mà khi sự xắp đặt cân bằng trên nhiều trục

-Đối xứng tâm: là đối xứng mà khi các yếu tố được sắp xếp đều xung quanh một tâm tròn

Cân bằng không đối xứng

Cân bằng không đối xứng, hay còn gọi là cân bằng không chính thống, thì trừu tượng hơn cân bằng đối xứng một chút xíu (và nhìn chung là thú vị hơn về mặt trực quan). Không cần phải là 2 hình hoàn toàn giống nhau cân xứng ở mỗi bên của bố cục, cân bằng không đối xứng bao gồm mọi vật với mọi kích thước, hình dạng, tông điệu hoặc vị trí khác hẳn nhau. Những đối tượng này được sắp xếp để mà bất chấp sự khác biệt giữa chúng, chúng vẫn có thể tương đồng với nhau trên page; Ví dụ dễ hiểu cho bạn là nếu bạn nó một vật thể lớn ở một bên trang thì hãy cân bằng nó với nhiều vật thể nhỏ bên phần còn lại, cách sắp xếp vẫn sẽ giữ được sự cân bằng.

Hình 1.12 là một poster của một buổi hòa nhạc do bạn tôi, Jeremy Darty thiết kế là một ví dụ điển hình cho cân bằng không đối xứng. “Sức nặng hình ảnh” của con chim hồng hạc màu hồng to lớn nằm bên trái được cân bằng lại bằng sự kết hợp của các con chim nhỏ hơn và các ô chữ phía bên phải. Nếu để ý bạn còn có thể thấy được Jeremy đã sử dụng Luật 3 phần. Đám mây có viền hồng bao quanh chữ Pop Sucks chiếm 1/3 theo chiều ngang và 2/3 theo chiều dọc của poster.

Hình 1.12

Hãy nhìn vào hình 3 viên đá ở hình 1.13 dưới đây. Có thể bức hình không được thiết thực lắm nhưng nó là bức hình cân bằng. Nếu bạn lấy một mảnh giấy và che lại bất kì hòn đá nào trong 3 viên đá ở dưới thì cả bức ảnh dường như bị mất cân bằng và chưa hoàn thiện. Đây chính là cách mà sự cân bằng được thể hiện. Nó như thể là toàn bộ sự sắp đặt trong bức tranh này được treo trên một cây đinh mong manh trên tường, chỉ cần một bên mất đi sẽ làm bức tranh rơi ngay xuống.

Hình 1.13

Không giống như cân bằng đối xứng, cân bằng không đối xứng mang tính nghệ thuật hơn và dĩ nhiên được sử dụng nhiều hơn ở website. Nếu bạn đã xem qua nhiều website có bố cục 2 cột thì bạn sẽ nhận ra rằng cột lớn hơn thường có màu nhạt hơn – một cách để tạo ra độ tương phản tốt cho văn bản và nội dung chính. Cột bé hơn thường đậm màu hơn và đôi khi có viền hoặc được làm sao cho nổi lên để tạo ra sự cân bằng trong bố cục. Trang About Us của website Steinway & Sons ở hình 1.14 là một ví dụ tiêu biểu cho cân bằng không đối xứng. Trong ví dụ này không có sự phân chia rõ ràng giữa cột bên phải, nó chỉ là một bức ảnh lớn cũ kỹ của một nhà sáng lập nên công ty. Bộ ria mép huyền thoại đó mang rất nhiều “sức nặng”, nhưng nó được cân bằng lại bởi dòng tiêu đề font Italic với kích thước phù hợp ở trên nội dung chính.

Hình 1.14

Còn nhiều những nguyên tắc cấu thành nên thiết kế website Steinway&Sons của Jessse Bennet Chamberlain nữa và nó còn vượt xa tầm của cân bằng không đối xứng. Website này có được một sự hài hòa tuyệt vời, có được nhờ cách sử dụng lặp lại những đường cong, kết cấu và kiểu chữ phù hợp. Đa số sự hài hòa đó có thể được lí giải với những nguyên tắc về sự thống nhất.

Sự thống nhất

Nguyên lý thiết kế mô tả sự thống nhất là cách mà những thành phần khác nhau được sắp xếp làm sao để có sự tương tác giữa chúng. Một bố cục thống nhất là một bố cục được liên kết với nhau như một tổng thể nhất định chứ không riêng biệt bất cứ phần nào. Lấy hình 1.15 làm ví dụ, ta thấy những con khỉ trong hình có sự giống nhau về hình dáng (chưa kể đến giống cả về màu sắc) làm cho chúng được nhận diện là một nhóm chứ không phải 4 yếu tố riêng biệt.

Hình 1.15

Mặc dù không được nhắc tới nhiều nhưng sự thống nhất là một trong nhiều lý do khiến cho các nhà thiết kế web không thích sử dụng HTML frames. Điều cốt yếu là phải làm sao cho sự thống nhất không chỉ có trong những yếu tố của một trang mà phải thống nhất xuyên xuốt cả website – như một thể thống nhất. Có một vài cách chúng ta có thể dùng để đạt được sự thống nhất trong bố cục: Sự gắn kết và Sự lặp lại

Sự gắn kết

Sự gắn kết nói một cách dễ hiểu là cách làm cho một nhóm các đối tượng trở thành một đơn vị thống nhất. Bằng cách đặt những đối tượng gần lại với nhau trong một bố cục sẽ tạo ra được một trung điểm làm thu hút trực quan của người xem. Hãy nhìn vào hình vẽ kĩ thuật số 1.16, trong khi những cánh khoa được đặt rời rạc thì 5 cánh hoa gần nhau nhất hình thành nên một thể thống nhất.

Hình 1.16

Chúng ta thực hành những nội dung về sự gắn kết trên web khi chúng ta bắt đầu điều chỉnh những đường kẻ lề và những khoảng đệm cho các yếu tố. Lấy ví dụ khi tôi bắt đầu hình thành những CSS style, tôi thường thay đổi mặc định của những đường kẻ lề giữa các HTML như tiêu đề, đoạn, khối và cả hình ảnh nữa. Thay đổi những giá trị này tôi có thể tạo ra nhiều hoặc ít hơn những khoảng trống giữa các yếu tố, từ đó hình thành nên các nhóm.

Nếu bạn nhìn vào hinh 1.17 bạn sẽ thấy có sự tương đồng giữa 2 cột văn bản. Điểm khác biệt duy nhất là vị trí của tiêu đề. Ở cột bên trái bạn sẽ thấy tiêu đề “Unkgnome” được tách biệt khỏi các đoạn ở trên và ở dưới làm cho nó trông giống như một phần riêng biệt chứ không phải là tiêu đề của bất kì đoạn nào. Ở cột còn lại, tiêu đề “Gnomenclature” được đặt sát với đoạn văn theo sau nó, mà theo luật của sự gắn kết thì điều này sẽ làm cho tiêu đề này thuộc về đoạn văn đó.

Hình 1.17

Sự lặp lại

Như người ta thường nói một bầy ngỗng, một đàn cá hoặc một quần thể sử tử. Bất cứ khi nào bạn mang những cá thể giống nhau lại thành một thì chúng sẽ hình thành một nhóm. Cũng tương tự như vậy, sự lặp lại về màu sắc, hình dạng, kết cấu hoặc những đối tượng giống nhau sẽ giúp liên kết các trang lại với nhau tạo thành một đơn vị gắn kết. Ví dụ ở hình 1.18 mô tả sự lặp lại này. Trông có vẻ như các dấu chấm cọ trong hình đều hao hao giống nhau nhưng 9 dấu chấm cọ màu đỏ bên trái làm cho ta thấy được chúng như là một nhóm bởi bì sự lặp lại về hình dạng, màu sắc và thậm chí là cả kết cấu nữa. Những dấu chấm còn lại ở bên phải không có được sự lặp lại như vậy nên chúng có vẻ bị tách biệt mặc dù xung quanh có những dấu chấm khác.

Hình 1.18

Cho dù bạn có để ý hay không thì sự lặp lại được sử dụng thường xuyên trong thiết kế web để tạo ra sự thống nhất cho bố cục. Bạn có thể thấy được ví dụ của sự lặp lại trong HTML là những danh sách liệt kê. Những gạch đầu dòng có hình dạng giống nhau tượng trưng cho một vật làm cho những vật được liệt kê trong danh sách trở thành một phần của một tổng thể chung.

Những kiểu mẫu và kết cấu được lặp lại cũng giúp liên kết một thiết kế lại với nhau. Hãy nhìn hình chụp của một ứng dụng khung ảnh số và cộng đồng nghệ thuật Odosketch được thiết kể bởi Odopod. Bố cục của nó chứa những hình ảnh rất bắt mắt nhưng điều cần chú ý ở đây là sự lặp lại của những khung ảnh trong mục “Featured” đã tạo ra được một Gallery thống nhất.

Sự nhấn mạnh

Cũng gần giống như ý tưởng về sự thống nhất, chúng ta có sự nhấn mạnh hoặc sự vượt trội. Thay vì phải tập trung vào việc hàn gắn nhiều yếu tố lại với nhau, sự nhấn mạnh tập trung vào việc làm sao để thu hút sự chú ý của người truy cập bởi một yếu tố nhất định. Khi thiết kế bố cục chắc hẳn bạn sẽ xác định một nội dung hoặc một bố cục nào đó mà bạn muốn làm nổi bật lên. Có khi nó là một nút bấm hoặc chỉ là một tin báo lỗi cho người dùng. Một phương pháp để nhấn mạnh một yếu tố nào đó là đặt yếu tố đó vào một trung điểm. Một trung điểm là bất cứ vị trí nào, yếu tố nào trên page của bạn mà có thể lôi kéo được trực quan của người truy cập chứ không chỉ là một phần của trang hoặc bị chìm vào với những nội dung xung quanh nó. Có một vài phương pháp sẽ giúp bạn tạo được một trung điểm.

Vị trí

Mặc dù những mặt hạn chế của việc thiết kế web không thường xuyên cho phép điều này, nhưng điểm chính giữa của một sự sắp xếp luôn là điểm mà người ta nhìn vào đầu tiên, cụ thể hơn đây chính là điểm lợi thế nhất để tạo ra được sự nhấn mạnh. Càng xa trung tâm thì các yếu tố càng được ít để ý tới đầu tiên. Trong một trang web thì góc trên bên trái dược coi là điểm được chú ý nhiều nhất với những người đọc từ trái qua phải (nên nhớ rằng nhiều ngôn ngữ, như Hebrew và Arabic được đọc từ phải sang trái) và từ trên xuống dưới như chúng ta.

Sự liên tục

Ý tưởng cho sự liên tục hoặc dòng chảy xảy ra khi mắt của bạn bắt đầu di chuyển theo một hướng cố định, chúng có xu hướng tiếp tục di chuyển theo hướng đó cho tới khi gặp một nội dung ấn tượng hơn. Hình 1.20 mô tả hiệu ứng này. Cho dù dấu chấm ở dưới lớn hơn và trông có vẻ bắt mắt trước tiên nhưng não của bạn không thể ngăn được việc nhìn theo hướng mũi tên. Không sớm thì muộn bạn cũng sẽ thấy mình đang nhìn vào dấu chấm nhỏ hơn.

Hình 1.20

Sự liên tục là phương pháp thông dụng nhất được các nhà thiết kế web sử dụng để thống nhất một bố cục. Theo mặc định thì rìa của những tiêu đề, văn bản và hình ảnh đều đường đặt thẳng hàng theo một hàng dọc đi xuống tới cuối của trang. Một cách đơn giản để sử dụng phương pháp này là sử dụng những đường thẳng trong đường kẻ ô. Nó cho bạn nhiều đường thẳng liên tục để lôi kéo trực quan của người tuy cập theo xuống dưới cuối cùng của trang.

Sự tách biệt

Cũng giống như sự liên kết giúp cho một thiết kế được thống nhất lại thì sự tách biệt làm cho chúng được nhấn mạnh lên. Một nội dung được làm nổi bật lên khỏi những nội dung xung quanh nó sẽ tạo được sự thu hút. Mặc dù con khỉ trông có vẻ buồn khi nó bị tách khỏi bạn bè của nó nhưng nó sẽ được nổi bật lên thành một trung điểm trong hình 1.21.

Hình 1.21

Sự tương phản

Sự tương phản được hiểu là việc đặt cạnh nhau những yếu tố hoàn toàn khác nhau về hình ảnh, và cũng là cách thông dụng nhất để tạo sự nhấn mạnh trong một bố cục. Cách thức hiện rất đơn giản: Một yếu tố càng không giống với những yếu tố xung quanh nó thì sẽ càng được nổi bật. Sự tương phản có thể được tạo ra bởi khác biệt về màu sắc (tôi sẽ nói chi tiết hơn về điểm này ở chương 2), kích thước và hình dạng. Hãy coi một ví dụ của trang chủ Twitter trong hình 1.22.

Nếu có một đường link hoặc một nút bấm mà bạn muốn những người truy cập của bạn click vào thì nó được gọi là một Call To Action. Khi nhìn vào bố cục của trang chủ Twitter, điều gì thu hút bạn chú ý đầu tiên? Đối với tôi thì nó là nút Sign Up ở cột bên phải. Nó là chỗ duy nhất trên page được tô màu vàng cam sáng chói và font chữ thì lớn hơn những ô như Search hoặc Sign In. Bằng cách đặt nó vào một ô nằm ngang qua thanh tiêu đề, nó có được sự liên tục, sự tách biệt và cả sự tương phản. Twitter rất muốn bạn ấn vào nút này, vì vậy để đảm bảo rằng nút Call To Action đượ hiệu quả thì họ phải càng nhấn mạnh nó càng tốt.

Tỉ lệ

Một cách thú vị khác để tạo ra được sự nhấn mạnh trong cách bố trí là việc sử dụng tỉ lệ. Tỉ lệ là một quy tắc trong thiết kế có liên quan đến sự khác biệt về kích thước của một vật. Nếu chúng ta đặt một vật trong một khung cảnh có diện tích nhỏ hơn chính vật đó thì ta sẽ cảm thấy được vật đó lớn hơn so với thực tế và ngược lại. Sự khác biệt về tỉ lệ này kéo được ánh mắt của người truy cập bởi sự nổi bật của nó.

Ở hình 1.23, tôi lại một lần nữa lấy chú khỉ đáng thương, bị tách biệt khỏi bạn bè và phóng to nó lên trên những tòa nhà trọc chời ở Manhatta. Với sự tương phản về màu sắc và khác biệt về tỉ lệ, não của bạn sẽ lập tức nói “Hình như có điều gì đó không đúng ở đây” và bạn sẽ bất giác nhìn chăm chú vào con khi này cho tới khi bạn ép mình nhìn đi chỗ khác.

Hình 1.23

Nguyên tắc này cũng có tác dụng tương tự trong việc làm nhỏ lại một vật so với tỉ lệ của những vật xung quanh. Hãy nhìn vào ví dụ của website BeerCamp ở hình 1.24 được thiết kế bởi David Desandro. Yếu tố đầu tiên mà bạn chú ý tới chắc chắn sẽ là tiêu đề BeerCamp bự khủng khiếp ở đầu trang. Tuy nhiên từ đây mắt tôi bắt đầu nhảy xuống hình mũi tên ở dưới và xuống những khu nhà hàng ngang. Điều này xảy ra bởi cả 2 yếu tố là sự liên kết và tỉ lệ. Đối với những ai có hứng thú với CSS3, tôi cho bạn biết rằng những hình bạn nhìn thấy ở đây đều được tự thiết kế, không lấy từ bất kì hình ảnh nào.

Hình 1.24

Tạo ra được sự nhấn mạnh cho thiết kế của bạn không những giúp bạn làm nổi bật nút Call To Action mà còn giúp bạn điều chỉnh được sự di chuyển của mắt người truy cập xuyên xuốt trang của bạn. Bạn có thể đưa ra được một thứ tự cho các người truy cập làm theo bằng việc điều chỉnh độ mạnh yếu phù hợp của từng yếu tố. Nếu nhớ được những điều này khi thiết kế, bạn có thể điều chỉnh độ mạnh yếu với Semantic HTML Markup và CSS. Lấy ví dụ khi bạn nối tiêu đề h1 và h6 lại với một mức độ hình ảnh được nhấn mạnh, bạn có thể đưa ra được những điểm quan trọng trên page cho các công cụ tìm kiếm và người truy cập của bạn.
Tiếp theo, ta sẽ tiếp tục với một vài ví dụ điển hình về thiết kế mà bạn có thể học hỏi

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 1.25 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.

Hình 1.25

Đ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 1.26 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.

Hình 1.26

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 1.27 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.

Hình 1.27

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.

Phong cách tạp chí không có thanh chuyển hướng (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 1.28, website Bold Italic và Weeks of UX.

Hình 1.28

Khung phụ lục 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 khung phụ lục mở rộng này ở bản đầu tiên của cuốn sách này 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 khung phụ lục 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.

Hình 1.29

Khung trần đơn giản

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 khung phụ lục 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 1.30, 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.

Hình 1.30

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.

Điều Chỉnh kích thước: Các bố cục cố dịnh, linh hoạt và khả ứng

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.

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 1.31 cho một bố cục được thể hiện dưới cả hai dạng cố định và linh hoạt.

Hình 1.31

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 độ rộng nhỏ nhất và lớn nhất 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ả: Bố cục khả ứng

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à “Thiết kế web khả dung (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ó. Nếu phải đặt tên cho kĩ thuật thiết kế này thì tôi sẽ đặt tên nó là PHƯƠNG PHÁP TOÀN NĂNG SAO THỦY MORPHING, đây cũng chính là lí do tại sao tôi không nên đặt tên cho 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 1.32 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.

Hình 1.32

Thiết kế web khả dụng của Ethan (hoặc tên của tôi đặt là PHƯƠNG PHÁP TOÀN NĂNG SAO THỦY MORPHING) 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 thiết kế web khả dụng, 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.

Áp dụng thực tế: Southern Savers

Thông thường thì công việc thiết kế thuộc về tiềm thức. Chúng tôi có thể nói cho bạn lí do tại sao chúng tôi lại có những quyết định cụ thể nhưng nó không theo một quá trình tự nhiên nào cả. Đôi khi để giải thích một quá trình thiết kế website tốt nhất là bằng cách lấy một ví dụ của một quá trình thiết kế cho một khách hàng thực tế.

Southern Savers, một dự án thiết kế website thực cho một khách hàng thực sự. Tháng 6 năm 2008, Jenny Martin mở một trang blog Southern Savers trên blogger.com để chia sẻ những thỏa thuận mua bán tốt nhất mà cô và các bạn của mình tìm được. Chỉ sau một vài tháng, trang web phát triển quá nhanh so với một trang blog và chồng cô bắt đầu chuyển tiếp trang qua Wordpress. Cả hai người đều không có kinh nghiệm gì trong việc thiết kế web cả nên họ đã mua một hình nền của Wordpress, tạo một tiêu đề với hình ảnh, và Jenny tiếp tục những việc như cô làm với blog của mình. Sau khoảng thời gian gần 2 năm kể từ khi bắt đầu, trang web hiện giờ nhận được 3 triệu lượt truy cập mỗi tháng và có hơn 60.000 fan trên Facebook – tất cả chỉ với những thiết kế mẫu căn bản như bạn thấy ở hình 1.35.

Hình 1.35

Jenny nhận ra rằng việc thiết kế lại là rất cần thiết và đã thuê một công ty chuyên thiết kế Squared Eye để làm việc. Là bạn của cả Jenny và Matthew Smith bên Squared Eye, tôi thấy rất thú vị khi được xem một quá trình thiết từ cả 2 bên, khách hàng và công ty. Tôi biết rằng đi xuyên xuốt dự án này qua từng chương của cuốn sách sẽ rất có ích cho bạn và tôi cũng hết sức biết ơn cả Jenny và Matthew đã cho phép tôi sử dụng dự án này làm ví dụ cho cuốn sách của tôi.

Khởi đầu

Thông thường thì khách hàng có sẵn cho mình những ý tưởng cụ thể về website của họ sẽ trông như thế nào và hoạt động ra làm sao. Tùy vào mỗi khách hàng thì những dự đoán này có thể có ích hoặc gây cản trờ cho quá trình thiết kế. Tuy nhiên với dự án này, Squared Eye được cho phép hoàn toàn tự do trong việc thiết kế lại hoàn chỉnh và thiết kế lại cả thương hiệu cho website. Matthew biết rằng điều quan trọng là anh ta và đội của mình không chỉ phải hiểu rõ cách làm việc của website mà còn phải nắm được người truy cập là ai và tại sao họ lại vào trang web. Nhà chiến lược website Emily Smith, người thiết kế nội dung cho dự án, giải thích: “Trước khi một thiết kế được bắt đầu, chúng tôi phải đi qua một giai đoạn gọi là khám phá để tìm ra được mục tiêu là gì. Chúng tôi cũng đi đến tận cửa hàng của Jenny và nói chuyện với các khách hàng. Chúng tôi đánh giá lí do tại sao mà họ lại sử dụng website này – thông qua cái nhìn của họ, và nói về các tính năng và chức năng mà họ sử dụng. Từ đó quan sát xem cách họ trả lời.”

Khảo sát người truy cập

Đây là quá trình mà Emily miêu tả là “thông qua cái nhìn của họ”. Việc kiểm soát được những hành vi và phản ứng của người dùng trước và sau khi tái thiết kế là một cách tốt để đánh giá độ thành công. Một công cụ hỗ trợ cho khảo sát người truy cập là Silverback.

Nhờ vào việc nói chuyện với Jenny và các người truy cập website của cô, Emily và cả team Squared Eye bắt đầu chia sẻ những thông tin có được. “Chúng tôi vẽ ra một biểu đồ tính cách của các người truy cập và chia nhỏ chúng ra thành từng cá thể một”, Matthew nói. Từ đây họ bắt đầu khám phá ra cách sắp xếp thông tin trên trang web làm sao để các người dùng cũ vẫn biết được họ đang tìm kiếm gì.

Như tôi đã nói ở những phần đầu tiên rằng những mẩu giấy ghi chú và một tấm bảng trắng là 2 công cụ hữu dụng trong việc thiết kế mô hình thông tin cho website. Emily đã sử dụng tốt cả 2 công cụ trên trong giai đoạn khám phá cho quá trình tái thiết kế Southern Savers. Như bạn cũng thấy ở hình 1.36, có rất nhiều nội dung cần được sắp xếp và một bức tường là nơi tốt nhất để làm việc này.

Hình 1.36

Một khi Emily đã nhóm lại được các trang theo từng khu vực chuyển hướng phù hợp, cô sẽ bắt đầu thiết kế bố cục. Cô biết rằng bố cục của web sẽ là 960 pixels và cũng như đa số cái web 960 pixels khác thì thiết kế bố cục 2 cột là cần thiết. Có rất nhiều yếu tố chuyển hướng trong website nên cô đã quyết định thiết kế một bố cục như một sơ đồ đường thẳng với một ứng dụng của Mac tên là Omnigraffle. Hình 1.37 cho thấy bản mẫu sơ đồ đường thẳng cho trang chủ.

Hình 1.37

Hãy chú ý rằng bản thiết kế không hề có màu sắc, hay hình ảnh, hay một HTML thực sự. Mục tiêu của sơ đồ đường thẳng này đơn giản chỉ là cho thấy được mô hình bố cục và vị trí của các yếu tố được sắp xếp trên đó. Ở phần trên của chương này, tôi đã nói rằng một thiết kế tốt là thiết kế mà người truy cập có thể “nhận diện được từng trang riêng biệt đều nằm trong một website tổng thể”. Điều này không có nghĩa là mỗi trang đều phải thực sự cần thiết giống nhau y hệt. Khi thiết kế những sơ đồ đường thẳng cho những trang còn lại của website, Emily đã “thêm gia vị” vào cho website bằng cách thiết kế những bố cục khác nhau xen kẽ ở từng khu vực, chẳng hạn như khu vực “Learn to Coupon” ở dưới hình 1.38

Hình 1.38

Đúng là có vẻ hơi quá khi nói “thêm gia vị” cho một sơ đồ đường thẳng chẳng có chút màu sắc nào, nhưng mọi thiết kế đều sẽ bắt đầu từ đây. Giờ thì website Southern Savers đã có được sơ đồ hoàn chỉnh, giờ sẽ là lúc tiếp tục một chủ đề khác: Màu sắc!